3.3 组件生命周期_React.js实战-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

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所示。