《React+Redux前端开发实战》—2.1.2 ES 6写法：React.Component

2.1.2  ES 6写法：React.Component

　　React.Component是以ES 6的形式来创建组件的，这是React目前极为推荐的创建有状态组件的方式。相对于React.createClass()，此种方式可以更好地实现代码复用。本节将2.1.1节介绍的React.createClass()形式改为React.Component形式。

　　使用React.Component创建组件示例：

　　class Input extends React.Component {

　　  constructor(props) {

　　      super(props);

　　      // 设置initial state

　　      this.state = {

　　          text: props.initialValue || 'placeholder'

　　      };

　　      // ES 6类中的函数必须手动绑定

　　      this.handleChange = this.handleChange.bind(this);

　　  }

　　  handleChange(event) {

　　      this.setState({

　　          text: event.target.value

　　      });

　　  }

　　  render() {

　　      return (

　　          <div>

　　              Type something:

　　              <input onChange={this.handleChange}

　　             value={this.state.text} />

　　          </div>

　　      );

　　  }

　　}

　　React.Component创建的组件，函数成员不会自动绑定this，需要开发者手动绑定，否则this无法获取当前组件的实例对象。当然绑定this的方法有多种，除了上面的示例代码中在constructor()中绑定this外，最常见的还有通过箭头函数来绑定this，以及在方法中直接使用bind(this)来绑定这两种。

　　通过箭头函数来绑定this示例：

　　// 使用bind来绑定

　　<div onClick={this.handleClick.bind(this)}></div>

　　在方法中直接使用bind(this)来绑定this示例：

　　// 使用arrow function来绑定

　　<div onClick={()=>this.handleClick()}></div>