The render() method is required.
When called, it should examine this.props and this.state and return a single child element. This child element can be either a virtual representation of a native DOM component (such as <div /> or React.DOM.div()) or another composite component that you've defined yourself.

When creating a component class by invoking React.createClass(), you should provide a specification object that contains a render method and can optionally contain other lifecycle methods described here.

注意render()方法返回单个div，注意返回里面最好不要处理逻辑，使用{this.fun()}

componentWillMount

Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

componentWillMount调用一次，如果在这个方法里调用setState()，render()方法将更新state

var List = React.createClass({
  render: function() {
    return (
      <ul>
        {
          this.props.items.map(function(item,index){
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    )
  }
});
var FilterreadList = React.createClass({
  getInitialState: function() {
    return {
      initialItems: [
        "Apples",
        "Broccoli",
        "Chicken",
        "Duck",
        "Eggs",
        "Fish",
        "Granola",
        "Hash Browns"
      ],
      items: []
    }
  },
  filterList: function(event) {
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item) {
      return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;

    });
    this.setState({
      items: updatedList
    });
  },
  componentWillMount: function() {
    this.setState({
      items: this.state.initialItems
    })
  },
  render: function() {
    return (
      <div className='filter-list'>
      <input type='text' placeholder='Search' onChange={this.filterList}/>
      <List items={this.state.items}/>
      </div>
    )
  }
})

componentDidMount

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components.
If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

组件的生命周期主要可以分为三个阶段，Mounting、Updating、Unmounting。React 在每一阶段开始前提供了 will 方法用于执行恰好在这一阶段开始前需要实行的操作，为每一段结束之后提供了 did 方法用于执行恰好这一阶段结束时需要实现的操作。下面我们详细说明一下每一个阶段的具体实现。

首先在 Mounting 阶段，Component 通过 React.createClass 被创建出来，然后调用 getInitialState 方法初始化 this.state。在 Component 执行 render 方法之前，通过调用 componentWillMount（方法修改 state 状态），然后执行 render。Reder 的过程即是组件生成 HTML 结构的过程。在 render 之后，Component 会调用 componentDidMount 方法。在这个方法执行之后，开发人员才能通过 this.getDOMNode()获取到组件的 DOM 节点。

当 Component 在 mount 结束之后，它当中有任何数据修改导致的更新都会在 Updating 阶段执行。Component 的 componentWillReceiveProps 方法会监听组件中 props。监听到 props 发生修改，它会比对新的数据与之前的数据之间是否存在差别进而修改 state 的值。当比对的结果为数据变化需要对 Component 对应的 DOM 节点做出修改的时候，shouldCoponentUpdate 方法它会返回 true 用于触发 componentWillUpdate 和 componentDidUpdate 方法。在默认的情况下 shouldComponentUpdate 返回为 true。有些特殊的情况是当 component 中的 props 发生修改，但是其本身数据并没有改变，或者是开发人员手工设置 shouldComponentUpdate 为 false 时，React 就不会更新这个 component 对应的 DOM 节点了。与 componentWillMount 和 componentDidMount 相类似，componentWillUpdate 和 componentDidUpdate 也分别在组件更新的 render 过程前后执行。

当开发人员需要将 component 从 DOM 中移除时，就会触发 UnMounting 阶段。在这个阶段中，React 只提供了一个 componentWillUnmount 方法在卸载和销毁这个 component 之前触发，用于删除 component 中的 DOM 元素等。