React（读书笔记二）

组件的生命周期

React严格定义了组件的生命周期，生命周期可能会经历如下三个过程

• 装载过程(Mount),也就是把组件第一次在DOM树中渲染的过程
• 更新过程(Update),当组件被重新渲染的过程
• 卸载过程(Unmount),组件从DOM中删除的过程

装载过程

• constructor
• getInitialState
• getDefaultProps
• componentWillMount
• render
• componentDidMount

1.constructor

不是每个组件都需要定义自己的构造函数，无状态的React组件往往不需要定义构造函数，一个React组件需要构造函数，往往为了以下目的：

• 初始化state，因为组件生命周期中任何函数都可能访问state，那么整个生命周期中第一个被调用的构造函数自然是初始化state最理想的地方。
• 绑定成员函数的this环境。
  eg:
  this.onClickButton = this.onClickButton.bind(this)

2.getInitialState和getDefaultProps

getInitialState这个函数返回值用来初始化组件的this.state
getDefaultProps函数的返回值可以作为props的初始值，和getInitialState一样，在React.createClass方法创造的组件类中才会用到。eg:

      class Sample = React.createClass({
          getInitialState: function() {
            return {foo: 'bar'};
          },
          getDefaultProps: function() {
            return {sampleProp: 0};
          }
      })

现在用ES6，在构造函数中通过给this.state赋值完成状态的初始化，通过给类属性(注意是类属性，而不是类的实例对象属性)defaultProps赋值指定的props初始值，达到的效果完全一样

    class Sample extends React.Component {
        constructor(props) {
          super(props);
          this.state = {foo: 'bar'};
        }
    }

  Sample.defaultProps = {
      return {sampleProp: 0}
   }

ps: React.createClass已经被Facebook官方逐渐废弃...

3.render

render函数无疑是React组件中最重要的函数，一个React组件可以忽略其他所有函数都不实现，但一定给要实现render函数，因为所有React组件的父类React.Component类对除render之外的生命周期函数都有默认实现。
render函数并不做实际的渲染动作，它只是返回一个JSX描述的结构，最终由React来操作渲染过程。
有时候特殊作用不是渲染，就让render函数返回一个null或false，从而表达这个函数不需要渲染任何DOM元素。
需注意，render函数应该是一个纯函数，完全更加this.state和this.props来决定返回的结果，而且不要产生任何副作用。

4.componentWillMount和componentDidMount

在装载过程中，componentWillMount会在调用render函数之前被调用，componentDidMount会在调用render函数之后被调用。
我们通常不定义componentWillMount函数，它做的事可以提前到constructor中间去做。
而相对比componentDidMount的作用大，render函数被调用完之后，componentDidMount函数并不是会被立即调用，componentDidMount被调用的时候，render函数返回的东西已经引发渲染，组件已被“装载”到DOM树上。只有React调用组件的render函数之后，才有可能完成装载，这时候才会依次调用各个组件的componentDidMount函数作为装载过程的收尾。
他们这对函数还有一个区别，componentWillMount可以在服务器端被调用，也可以在浏览器端被调用。而componentDidMount只能在浏览器端被调用，在服务器端使用React的时候不会被调用。