深入浅出React的生命周期

 

React中的生命周期就是组件的生命周期

组建本质就是状态机，输入确定，输出一定确定。

状态发生转化时会促发不同的钩子函数，从而让开发者有机会作出响应（类比事件来理解状态）

 组件的生命周期分为三个阶段：初始化、运行中、销毁阶段。每个阶段可以调用不同的钩子函数。

不同生命周期内可以自定义的钩子函数。 

初始化（实例化阶段）：

1. getDefaultProps（获取实例的默认属性）：只会在组件的第一个实例初始化时被调用。同一个组件的所有实例，他们拿到的默认属性都是一样的。只调用一次，实例之间共享引用。
2. getInitialState    （获取实例的初始化状态）：初始化每个实例特有的状态。
3. componentWillMount  （组件即将被装载到页面上）：render之前最后一次修改状态的机会
4. render                        （组件渲染）：会生成虚拟DOM,并将虚拟DOM转化成真正的DOM节点，并渲染到页面上。只能访问this.props和this.state,只有一个顶层组件，不允许修改状态和DOM输出
5. componentDidMount    （组件装载完成）：组件已经被渲染到页面上，成功render并渲染完成真实DOM后触发，可以修改DOM.

运行中：

1. componentWillReceiveProps（在接收到属性之前触发） 组件将要接收到属性时触发。父组件修改属性触发，可以修改新属性、状态。
2. shouldComponentUpdate      （当组件接收到新属性或者新状态时就会触发这个函数。）返回false，会阻止render调用（大部分时候不会用到这个函数，只有当你发现代码性能瓶颈时才会使用）

   语义上，这是个疑问句，组件是否要更新？
   如果组件不需要更新，我们可以在这步就返回false。

3. componentWillUpdate   （组件将要更新）：不能修改属性和状态（这个函数用的也不多）
4. render
5. componentDidUpdate     （组件更新完成）。会在render结束之后，真正的DOM被渲染完成后调用。可以修改DOM

销毁清理（卸载）阶段：

1. componentWillUnmount   （组件将要被销毁）：在删除组件之前进行清理操作，如计时器和事件监听器。