如何使用代码
安装项目前置依赖，以及启动项目的方法，参看：React 拾遗：项目脚手架。
请根据文章内容，把相应部分的代码注释取消，即可运行。
摘要
本文介绍
- 配置 ES7 新增类功能
- ES7 新增功能 1：属性可以定义在 constructor() 外面
- ES7 新增功能 2：箭头函数的类方法自动绑定 this
项目代码地址：React 拾遗：类作为组件 (2)
配置 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(<App />, 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>
);
}
}
ES 7 的方法
箭头函数赋值到变量上，就可以不用绑定 this。帮上面代码更改以后就是：
class App extends Component {
state = {
title: 'Hello from outside'
};
changeTitle = () => {
this.setState({ title: 'changed' })
}
render() {
return (
<div>
<h1 onClick={this.changeTitle}>Title - {this.state.title}</h1>
</div>
);
}
}
