React生命周期

React生命周期分为装载、更新、卸载、异常捕获

装载(Mounting)

组件被插入到DOM中

• getDefaultProps()
  声明默认的属性，ES6之前是这样

var Greeting = createReactClass({
  getDefaultProps: function() {
    return {
      name: 'Mary'
    };
  },

  // ...

});

ES6是这样

class Greeting extends React.Component {
  // ...
}

Greeting.defaultProps = {
  name: 'Mary'
};

• getInitialState()
  初始化state，ES6是constructor()

• componentWillMount()

• render()

• componentDidMount()
  客户端有这步，而服务端则没有

更新(Updating)

组件重新渲染以更新DOM(state或props变化触发)

• componentWillReceiveProps(nextProps)
  state变化可能不会触发它，因为state变化不一定组件的props变化
  nextProps为新接收到的属性
• shouldComponentUpdate()
  返回true才会触发下面的componentWillUpdate、render、componentDidUpdate函数，false则不会
• componentWillUpdate()
• render()
• componentDidUpdate()

卸载(Unmounting)

• componentWillUnmount()

异常捕获(Error handling)

• componentDidCatch()

图表总结

生命周期	调用次数	能否使用 setSate()
getDefaultProps	1(全局调用一次)	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	1	否