探究React的生命周期

原文发表在我的个人博客：kmknkk.xin

React-component-cycle

React的生命周期（这里指的是初版的生命周期，而非新的React生命周期）主要由 挂载，运行，卸载三个阶段构成，驱动着View层更新，接下来我们来详细看看这几个阶段都发生了什么。

- Mounting(挂载阶段)     - Updating(运行阶段)           - Unmounting(卸载阶段)
- getDefaultProps       - componentWillReceiveProps  - componentWillUnmount
- getInitialState       - shouldComponentUpdate
- componentWillMount    - componentWillUpdate
- render                - render
- componentDidMount     - componentDidUpdate

点此可体验在浏览器中体验一遍React的组件周期过程，如下gif图：

componentWillMount

（1）componentWillMount 在 render 之前被调用。故在该方法中进行同步 setState 不会触发重新渲染。

（2）这也是是唯一在服务器端渲染调用的生命周期钩子。

（3）是否可以使用setState(): 可以

render

（1）渲染函数，唯一的不能省略的函数，必须有返回值，返回null或false表示不渲染任何DOM元素。

（2）它是一个仅仅用于渲染的纯函数，返回值完全取决于this.state和this.props，不能在函数中进行任何修改props、state，拉取数据等具有副作用的操作。

componentDidMount

（1）componentDidMount在组件挂载之后立即执行。适用于：

• 需要初始化 DOM 节点的操作
• AJAX 请求

（2）在该钩子函数里面，可以使用 setState()，但是会触发重新渲染（re-render）

（3）是否可以使用setState(): 可以

componentWillReceiveProps(nextProps)

（1）该钩子函数将会在已挂载组件（mounted component）接收到新的 props 之前调用。适用于：

• 更新 state的值（比如重置）
• 比较 this.props 和 nextProps

（2）需要注意的是，即使 Props 没有发生变化，React 也有可能会调用该钩子函数。所以如果你想要真正处理 Props 的变化，要记得比较当前 props 和 nextProps

（3）是否可以使用setState(): 可以

shouldComponentUpdate(nextProps, nextState)

（1）当组件接收到新的 Props 或者 state 时，要进行 rendering 之前会调用这个钩子函数，用于告诉 React 组件是否需要重新渲染，默认返回为true表示需要重新渲染。

（2）当返回 false 的时候，当前组件的 componentWillUpdate、render 和 componentDidUpdate 将不再执行。但是此时该组件的 state 发生改变（即子组件的props会改变），所以并不阻止子组件进行重新渲染。

（3）shouldComponentUpdate()在两种情况下不会被调用：

• 初始化渲染
• 使用了 forceUpdate() 情况下

componentWillUpdate

（1）该钩子函数在 state or props 更新后 re-render 之前调用

（3）是否可以使用setState(): 不可以。不能在这里调用 setState，如果需要设置 state，应该在 componentWillReceiveProps 中调用 setState

componentDidUpdate

（1）在组件更新之后马上调用。在该钩子函数内，你可以：

• 操作 DOM
• 发起网络请求

（2）是否可以使用setState(): 可以

componentWillUnmount

（1）在组件卸载和销毁前调用。在该钩子函数内可以做一些清除工作，比如：

• 取消定时器
• 取消网络请求
• 解绑 DOM 事件

（2）是否可以使用setState(): 不可以

Question

React生命周期ComponentWillMount可否使用ajax,为什么？

答：如果要强行使用Ajax的话是可以的，但不推荐。原因：

（1）可能DOM还未准备好接收数据导致错误

（2）这样不利于同构（SSR与前端公用一套代码），因为后端无法使用传统Ajax。

（3）最好将Ajax写在ComponentDidMount，因为服务端不会执行这一函数，有利于同构。当然，强行使用fetch也是可行的。