快速了解React的组件生命周期

前言

工作快要满两个月了，一直在使用React全家桶（React + React Redux + Router + Ant Design）。工作中涉及到React生命周期函数的使用非常多，在此做一个整理。

React的组件生命周期

在这里我想引用 React中文文档 中的原话：

每个组件都有几个 “生命周期方法” ，您可以重写这些方法，以在过程中的特定时间运行代码。 前缀为 will 的方法在一些事情发生之前被调用，而前缀为 did 的方法在一些事情发生后被调用。

这段话告诉我们三件事情：

1. 生命周期方法我们可以自己改写。
2. 前缀是 will 的方法在一些事情发生之前被调用。
3. 前缀为 did 的方法在一些事情发生后被调用。

那组件的生命周期分为哪几个过程呢？共有三大过程：Mounting(装载)，Updating(更新)，Unmounting(卸载)

Mounting的意思就是一个组件实例被创建并将其插入 DOM 中；
Updating的意思就是刚刚完成Mounting的这个组件实例发生了变化，比如改变了 props 或 state；
Unmounting的意思就是这个组件从 DOM 中删除；

简而言之就是这三大过程，我去首次挂载这个组件，我去更新这个组件，我去卸载这个组件。
以下要介绍的组件的生命周期函数全都是围绕这三大过程。

组件的生命周期函数

当Mounting发生的时候

当组件挂载发生的时候，以下函数先后触发：

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount()

当Updating发生的时候

当组件更新发生的时候，以下函数先后触发：

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render()
5. componentDidUpdate()

当Unmounting发生的时候

当组件卸载发生的时候，这个函数触发：

• componentWillUnmount()

具体的函数参数和使用可以参考 React生命周期函数

总结

这些函数还是很有用的。

比如，在一个组件里要做一些后端数据请求，我们都是把请求放在componentDidMount()中；自定义Form组件的时候，我们经常会用到componentWillReceiveProps()。

当然这些是我个人的一些经验，就不展开说了。大家遇到类似需求的时候，别忘了这些好用的函数就好了。

补充

之后在读《深入React技术栈》这本书的时候，发现了一个描述React生命周期的很清晰的图，在这里贴一下：