React学习笔记5——组件的生命周期

render

在使用React.createClass创建一个组件类的时候，必须要提供一个render方法，其它的生命周期相关方法是可选的。

当组件的render方法被调用的时候，它会检查this.props和this.state，然后返回一个单独的子元素。所谓一个单独的子元素，即最外层只能是一个元素，无论它内部有多少层嵌套，例如下面的例子就是错误的：

var Component = React.createClass({
    render: function(){
        return (
            <div>a div</div>
            <div>another div</div>
        );
    }
});

如果该组件不需要渲染，render方法可以返回null或false，此时，React会为该组件创建一个<noscript>标签，并且此时React.findDOMNode(this)得到的也是null。

render方法应当是纯净的，也就是说，它仅仅关注于如何渲染组件，而不能够改变组件的状态，也不能够与浏览器有任何的交互。事实上，react的主要任务就是，在其它数据（this.props，this.state等）给定的情况下，应当如何进行渲染，而至于数据的获取、交互等等功能则由组件的其它方法来完成。

组件相关的方法

• render()
• getInitialState() 获取this.state的初始值，该方法只在组件加载到文档中之前执行一次
• getDefaultProps() 在组件类被创建的时候会被调用一次，该方法会在任何该类的实例生成之前调用，且其中的对象会被所有实例共享
• propTypes 用来验证传入的属性值的类型
• mixins 用于在多种组件之间共享一些行为
• statics 用于定义静态方法，例如：

var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});

MyComponent.customMethod('bar');  // true

• displayName JSX会自动设置该字段

组件生命周期相关的方法

• componentWillMount()
• componentDidMount()
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• componentDidUpdate()
• componentWillUnmount()

参考

• http://facebook.github.io/react/docs/component-specs.html