解析React组件的生命周期

生命周期是在各行各业都广泛运用的概念，如同日月更替，生老病死，一个整体的运作必然离不开各个部分不断的更替重组。在软件开发中也是如此，程序的交互也必然离不开组件的创建，更新与删除。下面就来探讨React中生命周期的实现。

在React严格定义了生命周期，分为如下三个过程：

1. 装载过程(mount):把组件渲染后第一次挂载到DOM树上的过程。
2. 更新过程(Update):组件内数据变化后重新渲染的过程。
3. 卸载过程(Unmount):将组件从DOM树上移除的过程。

在三种过程中组件会依次调用一些钩子函数，我们通常会在这些钩子函数中写下一些逻辑针对不同生命周期进行一些处理。下面一一分析不同过程中可以处理哪些钩子函数。

装载过程

constructor

在当组件第一次被渲染时，首先会调用constructor，即ES6中的构造函数。在该阶段中主要目的有3个。

1. 初始化state。因为每一个生命周期钩子函数中都可能访问state,则在最开始初始化是最合理的。
2. 设置默认props。通过给类属性Class.defaultProps赋值指定props的默认初始值。
3. 给成员函数绑定this环境。

在需要注意在早期的react版本中是通过react.createClass来实现ES6的contructor，目前在逐步废弃中，与初始化state和设置默认props对应的getInitialState和getDefaultProps方法也被取代，在ES6的语法中是不调用的。

componentWillMount

在往DOM树上渲染组件之前，会首先调用该方法。但通常这个阶段并没有什么需要做的事，装载之前做的事应该提前到constructor阶段去做。可以认为这个方法存在的主要目的就是和componentDidMount方法形成对称方便理解。

render

在这无疑是生命周期中最重要的一个阶段。所有react组件的父类对除了该钩子函数之外的生命周期都有默认实现，换句话说我们定义的组件必须有这个钩子函数存在。

在该函数用于返回一个JSX结构，交由react去管理Virtal DOM的最终渲染。

componentDidMount

在该钩子函数的调用时机发生在组件被装载到DOM树上之后。也就是说在这个阶段我们可以获取到渲染出的DOM元素了。通常ajax请求操作也放在这里处理。

更新过程

在当组件被挂载后，用户就可以看到组件并进行交互了。也就是更新state或props时，触发组件的更新流程。

componentWillReceiveProps(nextProps)

在该钩子函数的调用发生在子组件上。一旦父组件的render方法被调用，子组件就会更新并首先触发该钩子函数。需要注意这个函数的本质就是根据重新渲染时的props值去计算是否需要通过this.setState去更新内部state，所以通过this.setState触发的更新过程不会调用该函数。可以认为该函数专用于props变化或是父组件更新时的钩子函数。

shouldComponentUpdate(nextProps, nextState)

在该钩子函数需要返回一个布尔值用来决定该组件是否需要更新。这个方法通常用来提升渲染性能，尽可能的准确判断更新过程中不需要重渲染可以直接复用的组件。判断则是利用this.props，this.state和nextProps,nextState等参数完成相关逻辑。

componentWillUpdate,render,componentDidUpdate

在当shouldComponentUpdate返回true时就会触发该系列钩子函数。该阶段采用递归渲染，即父组件的componentWillUpdate在子组件之前执行，父组件的componentDidUpdate在子组件之后执行。

卸载过程

componentWillUnmount

在组件卸载过程中只涉及这一个钩子函数，主要完成清除数据的操作，用来解决一些可能造成内存泄露的问题。

小结

在至此就了解了react生命周期的执行过程。生命周期和state状态让组件变得非常灵活，但同时也会变得更复杂。在庞大的项目中，我们可能更倾向于编写无状态组件，将在今后的文章中讨论。