React Component 的生命周期 API

概述

每个 React 的组件都会有一组 “生命周期方法” ，你可以通过重载它们，使得你可以在组件的处理过程中插入特定的代码。根据时机分化如下三类

挂载 （Mounting）

这些方法会在组件的实例被创建和插入 DOM 的时候被触发。

• constructer()
• componentWillMount()
• render()
• componentDidMount

更新 （Updating）

props 和 state 的改变可能会造成更新事件的产生，以下这些方法会在组件被重新渲染的时候调用。

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

卸载 （Unmounting)

这个方法会在组件被移除 DOM 的时候被调用

• componentWillUnmount

其它

除了以上这些外，还有几个比较重要的，分别是

• setState()
• forceUpdate()
• defaultProps()
• displayName()

好的，我们现在来一个个解释上述方法

API 分析

constructor(props)

constructor （构造方法）会在组件被挂载之前调用，当你重载了 constructor 方法的时候，你必须在重载的方法中的第一行的位置添加super(props) 的代码，它会帮你初始化 props ，如果不这么做，你的组件中的 props 将会为为 undefined。

constructor 方法通常用于初始化 state 和绑定函数，如果你不需要这样的操作，那么你就可以不用重载constructor方法。

componentWillMount

componentWillMount会在挂载发生前被调用，它会在 render()方法之前被调用，因此在componentWillMount中使用同步方法设置 state 可能不会触发重新渲染。注意 setState() 不是同步方法，这点后文会谈。正因为如此，所以需要避免在 componentWillMount 方法中执行由副作用的操作。componentWillMount 一般来说只是作为一个渲染期间的一个钩子函数。

componentDidMount

```componentDidMount 将会在组件被挂载之后调用，如果你需要从服务端加载数据用于渲染组件，建议在这个地方添加，在这个地方使用 setState 会触发重新渲染。

为什么不建议在 componentWillMount 调用服务端接口

因为服务端接口返回是个异步的过程，有可能服务端接口返回的时候，组件还没有被挂载，这个时候服务端接口触发 setState 可能会产生问题，而在 componentDidMount 中组件以及被挂载好了，这个时候服务端的接口再返回的时候，setSate 方法就会正常触发重新渲染。

componentWillReceiveProps(nextProps)

当一个已经被挂载的组件接受一个新的 props 的时候componentWillReceiveProps 会被调用，nextProps 参数是新的 props。如果你的 state 需要在 props 变更的时候跟随着一起变更，那么你可以自行比较，然后在这个方法中调用 setState 方法。

• 注意1：在挂载阶段，初始化 props 的时候，componentWillReceiveProps 不会被调用。
• 注意2：它只会在 props 更新的时候被触发，这个更新一般是由父组件触发的。
• 注意3：setState 方法不会触发 componentWillReceiveProps 方法。

shouldComponentUpdate(nextProps, nextState)

这个方法的作用，是用于判断 React 组件是否需要重新渲染，默认的行为是 “ 任意一个 state 发生变动的时候触发重新渲染”。大部分的情况下，你都只需要遵循这样的默认方法就好了。
当新的 props 和 state 被接受的时候，shouldComponentUpdate 方法会在 render 方法之前被调用。在首次调用 render 和 forceUpdate 的时候，该方法不会被调用。

false 不会传递

当shouldComponentUpdate 方法返回 false 的时候，如果子组件内部的 state 发生改变，该方法无法阻止子组件内部的重新渲染。

未来可能的改动

当前，如果shouldComponentUpdate 返回为 false,那么相应后面的 componentWillUpdate ,render 和 componentDidUpdate 都不会被调用。未来 React 可能只会将 shouldComponentUpdate 方法视为一个建议，而不会因为该方法返回 false，就一定不执行重新渲染。

componentWillUpdate

该方法会在 render 方法之前被调用，和 componentWillMount 一样，不建议在这个地方调用 setState 方法。

componentDidUpdate

当组件发生重新渲染后，这个方法会被调用。

componentWillUnmount

这个方法将在组件被卸载和销毁的时候被调用。这个方法中，适合写清理方法，包括断开网络请求，停止定时器等操作。

forceUpdate(callback)

强制刷新方法, 通常来说页面的重新渲染需要依靠 state 或者 props 的变更来触发，如果你的变更来自除此之外的数据，你可以使用 forceUpdate 方法强制触发重新渲染，forceUpdate 会跳过 shouldComponentUpdate 的检查。

setState 详解

setState无疑是所有方法中最重要的，虽然严格来说，setState算不上 React Component 的生命周期方法，但是却和生命周期息息相关。setState 方法用于告知 React，组件的 state 发生变更，需要重新渲染，这是用于更新用户界面的基础方法。 setState 的声明如下

setState(updater,[callbck]);

参数解释

updater

updater 是一个函数参数，它的声明如下

（prevState, props) => stateChange

prevState 是之前 state 的引用，它不能直接被修改，如果你想修改它，必须要创建一个基于它的新的对象。props 指的就是当前的 props.

[callback]

第二个参数 callback 是可选的回调函数，这些回调函数会在 setState 完成，并且组件完成重新渲染后被调用。

异步性

setState 并不是一个同步方法，实际上它是一个异步的方法，setState 将你的请求作为一个任务提交，而不是立即去执行。

批量性

正确理解setState方法，应该把它理解为提交一个任务，而任务具体什么时候执行，是否是批量执行，则看 React 的策略。

参考

React Component