如何使用代码
安装项目前置依赖，以及启动项目的方法，参看：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(, 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>
);}
}
