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