React项目中那些奇怪的写法

1、在一个React组件里看到一个奇怪的写法：

 const {matchs} = this.props.matchs;

原来，是解构赋值，虽然听说过，但是看起来有点奇怪

下面做个实验：

 <script type="text/javascript">
        var props = {
            key1: 123 + "",
            key2: 456,
            key3: 789
        }
        const { key1 } = props
        console.log(key1, typeof (key1))

 </script>

原来可以减少不少代码量

 

2、如下

 

npm install graphql-tag --save
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
 
const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;
 
const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return 'Loading...';
      if (error) return `Error! ${error.message}`;
 
      return (
        <select name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

 

很明显，return里这个箭头函数的参数将是传入一个对象， 并且很可能不止3个属性，因此进行结构赋值以取属性来用。只有当函数的参数是一个对象时，变量

loading, error, data

才会通过解构赋值生成。如果函数调用时没提供参数，变量

loading, error, data

就不会生成，并报错。

 

为什么gal后面跟一个字符串？

 

原来是模板字符串的功能：它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）

alert`123`
// 等同于
alert(123)

 

参考：http://es6.ruanyifeng.com/#docs/string

 

3、

@withHeader
export default class Demo extends Component {
  render() {
    return (
      <div>
        我是一个普通组件
      </div>
    );
  }
}

在这里使用了ES7里的decorator，来提升写法上的优雅，但是实际上它只是一个语法糖，下面这种写法也是可以的：

const EnhanceDemo = withHeader(Demo);

参考：https://segmentfault.com/a/1190000010371752