4.7 React生命周期介绍

在前一节的结尾，我们提出了一个问题。下面就告诉读者，React框架为组件设计了一个“生命周期”的概念，用于配合React状态（State）实现组件的渲染操作。

在React组件中，生命周期可基本分成三个状态，具体如下：

●Mounting：已开始挂载真实的组件DOM。

●Updating：正在重新渲染组件DOM。

●Unmounting：已卸载真实的组件DOM。

同时，React框架定义了一组关于生命周期的方法，具体如下：

●componentWillMount()方法：在渲染前调用，可以在客户端，也可以在服务端。

●componentDidMount()方法：在第一次渲染后调用，只作用于客户端。

●componentWillUpdate()方法：在组件接收到新的Props参数或者State状态、但还没有渲染时被调用。另外，该方法在初始化时不会被调用。

●componentDidUpdate()方法：在组件完成更新后会立即调用。另外，该方法在初始化时不会被调用。

●componentWillUnmount()方法：在组件从DOM中被移除之前会立刻被调用。

以上这组与生命周期相关的方法，可以放到ES6组件类中进行使用，从而实现对React组件状态的控制。下面在【代码4-4】的基础上进行简单的修改，演示一下这组方法的用法：

【代码4-16】

关于【代码4-16】的说明：

●第08行和第09行代码所定义的方法，就是对React生命周期的使用过程。当然，设计人员可以选择自己项目所需的生命周期方法，无需将全部生命周期方法都放进组件类中。