React生命周期

React 类似 VueJs 一样具有自己的生命周期，它们的生命周期都会经历三个阶段：挂载、更新、卸载，而每一个阶段都有其对应的不同的钩子函数，只有充分了解其生命周期，在进行编码的过程中才能在不同的钩子函数中做我们自己想做的事情

图片来源：https://github.com/wojtekmaj/…
使用类组件而不是常规函数的一个优点是能够使用特殊的 React 方法或钩子来允许我们更新 UI 和应用程序状态。了解何时使用每种方法对于按照我们所希望的方式加载应用程序非常重要。
我们将针对 React 生命周期的三个阶段进行讨论：

• 挂载时(Mounting)
• 更新时(Updating)
• 卸载时(UnMounting)

挂载时

当创建一个组建的时候，它会挂载到 DOM 上。

constructor()

• 当页面加载的时候，最初也是唯一一次被调用
• 用于做一些初始化状态的操作
• 唯一可以修改 state 的地方(因为 react 一般想要修改 state，一般会调用 setState 方法)

static getDerivedStateFromProps(nextProps, prevState)

• 当 state 需要从 props 初始化时使用
• 每次 render 或者 rerender 的时候都会调用
• 尽量不要使用：维护两者一致性会增加复杂度
• 典型场景：表单控件获取默认值

render()

• 这是类组件中唯一必需的方法
• 每次 React 更新并提交到 DOM 的时候调用
• 用于为组件编写 JSX

componentDidMount()

• 在构造组件并将其添加到 DOM 上 (渲染后) 只执行一次
• 可用于获取数据并在渲染完成后立即显示
• 典型场景：获取外部资源

更新时

每当一个组件的 state 和 props 改变的时候，将在页面上重新进行渲染

static getDerivedStateFromProps(nextProps, prevState)

• 每次页面 render 之前调用，state 已更新
• 典型场景：获取 render 之前的 DOM 状态
• 很少使用：将 props 复制到 state

shouldComponentUpdate(nextProps, nextState)

• 返回一个布尔类型的值，默认返回 true
• 在渲染 (render) 之前或组件接受到新的 state 和 props 的时候马上执行
• 在每次重新渲染之前调用，但不是初始化操作时调用
• 决定 Virtual Dom 是否要重绘
• 对于性能优化，可以做一些不必重新渲染的操作

render()

• 对于一个类组件，这是唯一必需的方法
• 对于更新，如果 shouldComponentUpdate（）返回 false，则不会调用 render（）。

getSnapshotBeforeUpdate(prevProps, prevState)

• 此方法允许我们捕获在呈现该组件之前未存储在该状态中的某些属性。（即，如果用户滚动到页面上的特定位置，并且我们想要存储该位置并在以后使用它）
• 在 React 更新并提交新的内容到 DOM 之前调用
• 很少使用但可以捕获可能快速变化的数据

componentDidUpdate(previousProps, previousState, snapshot)

• 在组件已经重新渲染之后调用
• 用于渲染后的任何 DOM 更新

卸载时

在此阶段，组件将被删除并从 DOM 中清除

componentWillUnmount

• 在从 DOM 卸载组件之前调用它，做一些回收类的操作，如清除定时器等