生命周期简介
组件的生命周期分成三个状态：
-
Mounting：已插入真实 DOM
-
Updating：正在被重新渲染
-
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
react生命周期流程
-
初始化， 首次render
-
getDefaultProps() 用来设置组件属性的默认值,在组件被建立时候就立即调用，所有实例都可以共享这些属性。
-
getInitialState() 用于定义初始状态,也不可以使用this.state和setState。
-
componentWillMount() 只在初始化时候被调用一次，可以使用setState方法，会立即更新state，然后接着进行render。
-
render() 特别注意此方法里面不可以使用setState。如果其中包含其他的子组件，那么子组件的生命周期才开始进行。
-
componentDidmount() 在子组件也都加载完毕后执行，在react中DOM渲染完成，此时才可以操作dom。（如果需要通过id，class选取dom时，在此方法里使用）。
- props发生改变时更新
-
componentWillReceiveProps(nextProps)
componentWillReceiveProps方法可以比较this.props和nextProps来看是否发生了变化，然后可以进行setState等操作。
注意只要父组件此方法触发，那么子组件也会触发，也就是说父组件更新，子组件也会跟着更新。
- shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate 方法在接收了新的props或state后触发，你可以通过返回true或false来控制后面的生命周期流程是否触发。
- componentWillUpdate(nextProps, nextState)
componentWillUpdate在props或state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。
- render()
重新渲染。
- componentDidupdate(prevProps, prevState)
会等子组件也都更新完后才触发。
-
state发生改变时候更新
- shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate 方法在setState后state发生改变后触发，你可以通过返回true或false来控制后面的生命周期流程是否触发。
- componentWillUpdate(nextProps, nextState)
componentWillUpdate在state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。
- render()
重新渲染。
- componentDidupdate(prevProps, prevState)
会等子组件也都更新完后才触发。
-
使用redux时候情况
在使用redux做状态管理时候，基本不需要透过生命周期去做setState这样的状态管理了，基本都是用props来传递来重新渲染，需要注意的仅仅是在哪个生命周期时候触发action，比如需要进行ajax请求时候一般都是在componentDidMount和componentWillReceiveProps时候进行，在reducer中处理完，然后在通过props传入组件执行组件的更新周期。
参考资料
-
阮一峰react入门实例
-
react生命周期总结