第2章  React的组件

　　在React中，组件是应用程序的基石，页面中所有的界面和功能都是由组件堆积而成的。在前端组件化开发之前，一个页面可能会有成百上千行代码逻辑写在一个.js文件中，这种代码可读性很差，如果增加功能，很容易出现一些意想不到的问题。合理的组件设计有利于降低系统各个功能的耦合性，并提高功能内部的聚合性。这对于前端工程化及降低代码维护成本来说，是非常必要的。

　　本章主要介绍React中组件的创建、成员、通信和生命周期，最后会通过一个实战案例——TodoList演示组件的使用。

2.1  组件的声明方式

　　简单来说，在React中创建组件的方式有3种。

•  ES 5写法：React.createClass()（老版本用法，不建议使用）；

•  ES 6写法：React.Component；

•  无状态的函数式写法，又称为纯组件SFC。

2.1.1  ES 5写法：React.createClass()

　　React.createClass()是React刚出现时官方推荐的创建组件方式，它使用ES 5原生的JavaScript来实现React组件。React.createClass()这个方法构建一个组件“类”，它接受一个对象为参数，对象中必须声明一个render()方法，render()方法将返回一个组件实例。

　　使用React.createClass()创建组件示例：

　　var Input = React.createClass({

　　  // 定义传入props中的各种属性类型

　　  propTypes: { 

　　      initialValue: React.PropTypes.string

　　  },

　　  //组件默认的props对象

　　  defaultProps: {

　　      initialValue: ''

　　  },

　　  // 设置initial state

　　  getInitialState: function() {

　　      return {

　　          text: this.props.initialValue || 'placeholder'

　　      };

　　  },

　　  handleChange: function(event) {

　　      this.setState({

　　          text: event.target.value

　　      });

　　  },

　　  render: function() {

　　      return (

　　          <div>

　　              Type something:

　　              <input onChange={this.handleChange} value={this.state.text} />

　　          </div>

　　      );

　　  }

　　});

　　createClass()本质上是一个工厂函数。createClass()声明的组件方法的定义使用半角逗号隔开，因为creatClass()本质上是一个函数，传递给它的是一个Object。通过propTypes对象和getDefaultProps()方法来设置props类型和获取props。createClass()内的方法会正确绑定this到React类的实例上，这也会导致一定的性能开销。React早期版本使用该方法，而在新版本中该方法被废弃，因此不建议读者使用。