详解React的生命周期

React生命周期

以前本身在学习React的时候，只是简单的理解了生命周期有这么一些，可是不知道大概的一个流程是怎么样的。那天在面试的时候，问到了。本身也有点懵，也没提早看，不过仍是答上来了一些，这里来总结一下。

1、理论

组件本质上是状态即，输入肯定，输出必定肯定
生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类：

2、初始化阶段

getDefaultProps：获取实例的默认属性（即便没有生成实例，组件的第一个实例被初始化createClass的时候调用，只调用一次）
getInitialState：获取每一个实例的初始化状态（每一个实例本身维护）
componentWillMount：组件即将被装载、渲染到页面上，即组件挂载以前调用一次，若是在这个函数中调用setState，本次的render函数能够看到更新后的state，而且只渲染一次
render:组件在这里生成虚拟的DOM节点（只能访问this.props和this.state,只有一个顶层组件，render返回值只能是一个组件，不容许修改状态和DOM输出）
componentDidMount：在组件挂载以后调用一次，这个时候子组件也都挂载好了，能够在这里使用refs。组件真正在被装载以后能够修改DOM

3、运行中状态

componentWillReceiveProps（nextProps）：当组件props改变的时候，组件将要接收到新的属性的时候调用。props是父组件传递给子组件的，父组件发生render的时候子组件就会调用这个方法，无论props有没有更新，也无论父子组件之间有没有数据交换。
shouldComponentUpdate（nextProps，nextState）：当组件数据（props）或者状态（state）改变的时候调用，组件挂载以后，每次调用setState后都会调用shouldComponentUpdate判断是否须要从新渲染组件。默认返回true，须要从新render。在比较复杂的应用里，有一些数据的改变并不影响界面显示，能够在这里作判断，优化渲染效率。
componentWillUpdate（nextProps，nextState）:这个是shouldComponentUpdate方法返回true的时候或者调用forceUpdate以后调用。这时候不能修改属性和状态
render：只能访问this.props和this.state,只有一个顶层组件，render返回值只能是一个组件，不容许修改状态和DOM输出
componentDidUpdate：除了首次render以后调用componentDidMount，其余render结束以后都是调用componentDidUpdate

4、销毁阶段

componentWillUnmount：开发者须要来销毁（组件真正删除以前调用，好比销毁计时器和事件监听器）

React中，触发render有四条路径（更新方式）

如下假设shouldComponentUpdate都是按照默认返回true的方式
1.首次渲染（Initial render）
2.调用this.setState（并非一次setState会触发一次render，React可能会合并操做，而后一次性进行render）
3.父组件发生更新（通常就是props发生改变，可是就算props没有改变huozhe父子组件之间没有数据交换也会触发render）
4.调用this.forceUpdate

注意：若是在shouldComponentUpdate里面返回false能够提早退出更新路径。