配置 ES7 新增类功能
ES7 拟对 JavaScript 的类进行进一步的加强，比如属性可以不用在 constructor() 中设置，箭头函数的类方法自动绑定 this。但是这些新功能还处于 ES7 的 stage-2阶段，即起草阶段。
想要使用 ES 7 的新功能，需要使用 babel 的插件才能使用这些新功能。可以直接使用 babel-preset-stage-2@6.24.1 这个 npm 包，内容参见 Stage 2 preset。但是，stage-2 中的内容可能有些会被弃用，不确定性大，可以只使用其中关于类的功能。
这里是单独安装新增类功能的 babel 插件。
yarn add --dev babel-plugin-transform-class-properties@6.24.1
同时修改 .babelrc，把插件放进去。这样就可以使用 ES7 新增的类功能了。
{
"presets": ["env", "react"],
"plugins": ["transform-class-properties"]
}
ES7 新增类功能 1：属性可以定义在 constructor() 外面
原来类属性需要写在 constructor() 中，比如：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
this.title = 'Hello in constructor'; }
render() {
return (
<div>
<h1>Title - {this.title}</h1>
</div>
);}
}
ReactDOM.render(, document.getElementById('root'));
ES7 可以不用把属性写在 constructor() 中。
在安装了上述 babel-preset-stage-2@6.24.1 插件以后，下面的代码仍然正确。
而且 props 可以直接使用，可以在 render() 方法中把 this.props 打印出来查看。
类属性变量前面不用写声明 const 或 let。调用属性仍然是 this.title 的形式。
class App extends Component {
title = 'Hello from outside';
render() {
console.log(this.props);
return (
<div>
<h1>Title - {this.title}</h1>
</div>
);}
}
这就意味着可以直接写 state，比如：
class App extends Component {
state = {
title: 'Hello from outside'};
render() {
return (
<div>
<h1>Title - {this.state.title}</h1>
</div>
);}
}
ES7 新增类功能 2：箭头函数的类方法自动绑定 this
ES 6 中类方法需要绑定 this，即需要到 constructor() 中去调用 .bind(this) 才能用 this. 来调用，或者在调用处去绑定。
比如：实现一个点击标题，改变标题文字内容的功能的方法。ES 6 需要在 constructor 中绑定 this:
class App extends Component {
constructor() {
super()
this.changeTitle = this.changeTitle.bind(this);}
state = {
title: 'Hello from outside'};
changeTitle() {
this.setState({ title: 'changed' })}
render() {
return (
<div>
<h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
</div>
);}
}
或者调用处去绑定 this：
class App extends Component {
state = {
title: 'Hello from outside'};
changeTitle() {
this.setState({ title: 'changed' })}
render() {
return (
<div>
<h1 onClick={this.changeTitle.bind(this)}>Title - {this.state.title}</h1>
</div>
);}
}
