react-生命周期

生命周期 只有类组件有生命周期，函数组件是没有生命周期的

---

不在render/componentDidUpdate执行setState

• Mounting(挂载)：已插入真实 DOM
  • constructor(): 在 React 组件挂载之前，会调用它的构造函数。
  • getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
  • render(): render() 方法是 class 组件中唯一必须实现的方法。
  • componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。

• Updating(更新)：正在被重新渲染（每当组件的 state 或 props 发生变化时，组件就会更新。）
  • getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
  • shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
  • render(): render() 方法是 class 组件中唯一必须实现的方法。
  • getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
  • componentDidUpdate(): 在更新后会被立即调用。

• Unmounting(卸载)：已移出真实 DOM
  • componentWillUnmount(): 在组件卸载及销毁之前直接调用。

生命周期 - 挂载阶段

---

钩子函数	触发时机	作用
constructor	创建组件时，最先执行，初始化的时候只执行一次	1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render	每次组件渲染都会触发	渲染UI（注意： 不能在里面调用setState() ）
componentDidMount	组件挂载（完成DOM渲染）后执行，初始化的时候执行一次	1. 发送网络请求 2.DOM操作

生命周期 - 更新阶段

---

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与 挂载阶段 是同一个render）
componentDidUpdate	组件更新后（DOM渲染完毕）	DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

生命周期 - 卸载阶段

---

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）