【React】生命周期

---

前言

本篇文章记录我对React生命周期的理解。生命周期函数只会在类组件里面讨论，函数组件是没有这个概念的。

---

一、旧生命周期

二、新生命周期

三、理解

3.1 组件挂载阶段

将组件渲染出来并插入到 DOM 中

• constructor：设置组件的初始配置
• render：解析JSX，渲染DOM，呈现在界面上
• componentDidMount：组件挂载完成（网络请求，设置定时器，添加事件监听，添加DOM元素）

3.2 组件更新阶段

触发更新的两个条件：

1. 当数据更新之后，组件就会被重新渲染
2. 外界传入的 props 以及自身管理的状态

更新过程：

• shouldComponentUpdate(nextProps, nextState)：控制组件是否更新。参数nextProps表示下一个props，参数nextState表示下一个state。函数默认返回的是 true，如果返回 false，那么后续的方法就不会执行。常见的用法是子组件在父组件中，当父组件触发了更新，子组件的数据并没有改变，但是也会被带着更新，这是不合理的，所以为了避免这种情况，在子组件里使用此方法，或者子组件继承自 PureComponent 组件
• render：解析JSX，渲染DOM，呈现在界面上
• componentDidUpdate：组件更新完成之后执行

3.3 组件卸载阶段

将组件从DOM上卸载

• componentWillUnmount：组件卸载前将要执行的操作。比如清除定时器