React的生命周期介绍

    上一篇主要写得是React组件的prop和state,及两者的对比。本篇介绍React的生命周期。了解生命周期，才能知道组件是如何运转起来的。而了解Virtual DOM是学习React生命周期的基础。

 

    一、从改变组建状态的角度分析

    在前面的博客中我们提到过Virtual DOM, 组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。那React的哪个方法来将虚拟DOM渲染为真实的DOM呢？它就是React.render()。这个函数在React的demo详细讲解一中有介绍过，温故而知新。

    显示，render()函数是改变React组件状态的一个重要的点。React官网上将组建插入到Document叫做挂载（mount）所以在render()前后对应了两个阶段即：componentWillMount()和componentDidMount()。

    同理，我们可以思考一下在render()之后，还有哪些操作可以改变组件状态？用户的update操作，更新后会重新渲染到DOM节点上。所以update()前后对应了两个阶段即：componentWillUpdate(object nextProps, object nextState)和componentDidUpdate(object prevProps, object prevState)。

    同理，在移除真实DOM的操作unmount()的前也有一个阶段：componentWillUnmount()。

    二、从时间和流程的角度分析

    以上对生命周期阶段的介绍是从动作的触发引起的组件状态变化的角度来分析的，不具有时间上的连贯性。下面我们从流程和时间的角度分析一下都有哪些生命周期的阶段。

流程1：Initial-->mount-->update
/* Initial */
getDefaultProps 
getInitialState 
/* mount */
componentWillMount 
render 
componentDidMount 
/* update */
componentWillReceiveProps 
shouldComponentUpdate 
componentWillUpdate 
render 
componentDidUpdate


流程2：Initial-->unmount
/* Initial*/
getDefaultProps 
getInitialState 
/* mount */
componentWillMount 
render 
componentDidMount 
/* unmount */
componentWillUnmount

 

    基本上所有的React组件的生命周期方法都可以被分割成四个阶段：初始化、挂载阶段（mounting）、更新阶段、卸载阶段（unmounting）。

    补充两点：

    1.初始化阶段就是我们分别通过getDefaultProps()和getInitialState()方法定义this.props默认值和this.state初始值的阶段。getDefaultProps()方法被调用一次并缓存起来——在多个类实例之间共享。getInitialState()方法也只会被调用一次，（调用时机）刚好是mounting阶段开始之前。返回值将会被当成this.state的初始值，且必须是一个对象。

    2.在will update，组件接收到新属性时方法componentWillReceiveProps()被调用;shouldComponentUpdate()方法允许我们自行决定下一个state更新时是否触发重复render。此方法返回一个布尔值，且默认是true。但是我们也可以返回false，这样下面的（生命周期）方法将不会被调用

   

     React为我们提供了一种在创建组件时申明一些将会在组件生命周期的特定时机被自动调用的方法的可能。现在我们很清晰的理解了每一个组件生命周期方法所扮演的角色以及他们被调用的顺序。这使我们有机会在组件创建和销毁时执行一些操作。也允许我们在当属性和状态变化时做出相应的反应从而更容易的整合第三方库和追踪性能问题。