3.3 组件生命周期
所谓的生命周期，可以用有生命的人体来表达这个意思。从出生到成长，最后到死亡，这个过程的时间可以理解为生命周期。React的生命周期同理也是这么一个过程。在React的工作中，生命周期也一直存在于工作过程中。React的生命周期严格分为三个阶段：挂载期（也叫实例化期）、更新期（也叫存在期）、卸载期（也叫销毁期）。在每个周期中，React都提供了一些钩子函数，读者可以依据这些钩子函数很好地理解React的生命周期是一个怎样的过程。React的生命周期描述如下：
·挂载期：一个组件实例初次被创建的过程。
·更新期：组件在创建后再次渲染的过程。
·卸载期：组件在使用完后被销毁的过程。
3.3.1 组件的挂载
组件在首次创建后，进行第一次的渲染称为挂载期。挂载期有一些方法会被依次触发，列举如下：
·constructor（构造函数，初始化状态值）
·getInitialState（设置状态机）
·getDefaultProps（获取默认的props）
·componentWillMount（首次渲染前执行）
·render（渲染组件）
·componentDIdMount（render渲染后执行的操作）
这里用一个示例来直观感受一下组件挂载这个阶段的执行过程，如示例3-7所示。
【示例3-7 组件挂载】
这里用ES6的标准来呈现组件的挂载过程，在组件创建的时候会按照上述代码中的console依次输出相关内容。在ES6中是不使用getInitialState和getDefaultProps两个方法的，这是ES5的方法。读者注意，ES5中React.createClass渐渐要被FaceBook官方废弃，建议以后的React写法，最好用ES6标准来写。设置state的初始值以及获取props，已经在上述示例中实现：设置state初始值在构造函数中用this.state来处理，获取props用defaultProps来处理。
另外还需要注意，在React组件中，render方法必须实现，如果没有实现会报错，其他的方法可以不实现，因为除了render方法外，其他方法在父类Component中都有默认实现。
上述代码在浏览器上的效果如图3-1所示。
图3-1 组件挂载中的函数执行结果
3.3.2 组件的更新
组件更新，指的是在组件初次渲染后，进行了组件状态的改变。在实际项目中，组件更新是经常性操作。React在生命周期中的更新过程包括以下几个方法：
·componentWillReceiveProps：当父组件更新子组件的state时，该方法会被调用。
·shouldComponentUpdate：该方法决定组件state或者props的改变是否需要重新渲染组件。
·componentWillUpdate：在组件接受新的props或者state时，即将进行重新渲染前调用该方法，和componentWillMount方法类似。
·componentDidUpdate：在组件重新渲染后调用该方法，和componentDidMount方法类似。
下面用一个具体示例来更好地理解组件更新过程。
【示例3-8 组件更新】
该示例是建立在组件挂载示例基础上的组件更新过程，这样读者对生命周期的整个过程会有更好的理解。上述示例描述了两个组件，父组件＜HelloWorldFather/＞和子组件＜HelloWorld/＞。子组件的state由父组件来更新。整体的实现功能为，子组件首次渲染，属性name值为“React”，当父组件name值改为“Vue”时，子组件的state随之发生改变，进而触发组件生命周期中更新的相关操作。运行效果如图3-2所示。
图3-2 组件更新运行效果
从第6步到第9步为组件更新过程。
提示
在组件更新过程中，需要注意shouldComponentUpdate（）方法，如果该方法返回值为false时，组件将不进行重新渲染。该方法如果能用的恰到好处，就能够在React性能优化方面起到一定作用。虽然说React的性能已经可以了，但是减少没有必要的渲染依然可以进一步优化性能。
3.3.3 组件的卸载
生命周期的最后一个过程为组件卸载期，也称为组件销毁期。该过程主要涉及一个方法，即componentWillUnmount，当组件从DOM树删除的时候调用该方法。
这里以示例3-8为基础，通过添加组件销毁的方法来理解生命周期中的最后一个组件卸载环节，如示例3-9所示。
【示例3-9 组件卸载】
上述示例在示例3-8的基础上通过添加卸载事件来卸载组件，这里用到的方法为unmountComponentAtNode（），参数为DOM的ID，当组件卸载后，调用生命周期中的卸载钩子方法componentWillUnmount（）。效果如图3-3所示。
图3-3 组件卸载效果
3.3.4 总览组件生命周期
React组件生命周期经历三个阶段：组件挂载期、组件更新期、组件卸载期。整个过程大致可以用图3-4来描述。
图3-4 React组件生命周期流程图
React整个生命周期提供了完整的钩子方法，这些方法伴随着整个组件从创建到销毁。React生命周期中主要做的事情是围绕组件state和props的状态改变而产生的一系列操作。读者在实际项目开发中，如果能真正理解React的生命周期，对编码的整体性会有很好的把握。