React 入门（三） 生命周期

📢 大家好，我是小超同学，这一篇是关于 React 的学习笔记，关于组件的生命周期 😊

📢 非常感谢你的阅读，不对的地方欢迎指正 🙏

📢 愿你生活明朗，万物可爱 😍

在 React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。那么在 React 的生命周期中，有哪些钩子函数呢，我们来总结一下

React 生命周期

⏳旧版生命周期

React的旧版生命周期主要包括三个阶段：初始化阶段，更新阶段，销毁阶段

生命周期旧父子关系生命周期

这里有四条路线分别是：

初始化阶段挂载时 → constructor → componentWillMount → render → componentDidMount

setState()执行时→ shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate

forceUpdate执行时→ componentWillUpdate → render → componentDidUpdate

父组件render执行时→ componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate

初始化阶段

1. constructor 执行

constructor 在组件初始化的时候只会执行一次

通常它用于做这两件事

1. 初始化函数内部 state
2. 绑定函数

jsx
constructor(props) {
    console.log('进入构造器');
    super(props)
    this.state = { count: 0 }
}

现在我们通常不会使用 constructor 属性，而是改用类加箭头函数的方法，来替代 constructor

例如，我们可以这样初始化 state

jsx
state = {
	count: 0
};

下面是每个阶段的详细描述和相应的图表

1. 初始化阶段 这是组件实例被创建和插入DOM的阶段。

graph TB
  A["挂载阶段"]
  A -- "constructor" --> B["构造函数"]
  A -- "componentWillMount" --> C["组件即将挂载"]
  A -- "render" --> D["渲染组件"]
  A -- "componentDidMount" --> E["组件已挂载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;

• constructor：这是组件的构造函数，通常在这里初始化state和绑定事件处理器。
• componentWillMount：这是组件即将被挂载到DOM的时候调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
• render：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
• componentDidMount：这是组件已经被挂载到DOM后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如发起网络请求或添加事件监听器。

2. 更新阶段 这是组件的props或state改变，导致组件需要重新渲染的阶段。

这个图是组件的props或state改变总体图

graph TB
  A["更新阶段"]
  A -- "componentWillReceiveProps" --> B["组件将接收新的props"]
  A -- "shouldComponentUpdate" --> C["判断是否应该更新组件"]
  A -- "componentWillUpdate" --> D["组件即将更新"]
  A -- "render" --> E["渲染组件"]
  A -- "componentDidUpdate" --> F["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
  linkStyle 4 stroke:#2ecd71,stroke-width:2px;

• componentWillReceiveProps：这是组件将接收新的props时调用的方法。在这个方法中，你可以根据新的props来更新state。
• shouldComponentUpdate：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
• componentWillUpdate：这是组件即将更新时调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
• render：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
• componentDidUpdate：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

当props改变时

graph TB
  A["props改变"]
  A -- "componentWillReceiveProps" --> B["组件将接收新的props"]
  B -- "shouldComponentUpdate" --> C["判断是否应该更新组件"]
  C -- "componentWillUpdate" --> D["组件即将更新"]
  D -- "render" --> E["渲染组件"]
  E -- "componentDidUpdate" --> F["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
  linkStyle 4 stroke:#2ecd71,stroke-width:2px;

• componentWillReceiveProps：这是组件将接收新的props时调用的方法。在这个方法中，你可以根据新的props来更新state。
• shouldComponentUpdate：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
• componentWillUpdate：这是组件即将更新时调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
• render：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
• componentDidUpdate：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

当state改变时

graph TB
  A["state改变"]
  A -- "shouldComponentUpdate" --> B["判断是否应该更新组件"]
  B -- "componentWillUpdate" --> C["组件即将更新"]
  C -- "render" --> D["渲染组件"]
  D -- "componentDidUpdate" --> E["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;

• shouldComponentUpdate：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
• componentWillUpdate：这是组件即将更新时调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
• render：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
• componentDidUpdate：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

3. 卸载阶段 这是组件被移除和销毁的阶段

graph TB
  A["卸载阶段"]
  A -- "componentWillUnmount" --> B["组件即将卸载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;

• componentWillUnmount：这是组件即将被卸载和销毁时调用的方法。在这个方法中，你可以执行一些清理工作，比如清除定时器或移除事件监听器。

🚀新版本生命周期

React的新版生命周期主要包括三个阶段：初始化阶段，更新阶段，销毁阶段

1. 挂载阶段 这是组件实例被创建和插入DOM的阶段

graph TB
  A["挂载阶段"]
  A -- "constructor" --> B["构造函数"]
  A -- "static getDerivedStateFromProps" --> C["从props获取派生state"]
  A -- "render" --> D["渲染组件"]
  A -- "componentDidMount" --> E["组件已挂载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;

• constructor：这是组件的构造函数，通常在这里初始化state和绑定事件处理器。
• static getDerivedStateFromProps：这是一个静态方法，用于从props获取派生state。这个方法在挂载和更新阶段都会被调用。
• render：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
• componentDidMount：这是组件已经被挂载到DOM后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如发起网络请求或添加事件监听器。

2. 更新阶段 这是组件的props或state改变，导致组件需要重新渲染的阶段

graph TB
  A["更新阶段"]
  A -- "static getDerivedStateFromProps" --> B["从props获取派生state"]
  A -- "shouldComponentUpdate" --> C["判断是否应该更新组件"]
  A -- "render" --> D["渲染组件"]
  A -- "getSnapshotBeforeUpdate" --> E["获取更新前的快照"]
  A -- "componentDidUpdate" --> F["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
  linkStyle 4 stroke:#2ecd71,stroke-width:2px;

• static getDerivedStateFromProps：这是一个静态方法，用于从props获取派生state。这个方法在挂载和更新阶段都会被调用。
• shouldComponentUpdate：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
• render：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
• getSnapshotBeforeUpdate：这是一个在DOM更新前获取快照的方法。它返回的值会作为componentDidUpdate的第三个参数。
• componentDidUpdate：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

3. 卸载阶段 这是组件被移除和销毁的阶段

graph TB
  A["卸载阶段"]
  A -- "componentWillUnmount" --> B["组件即将卸载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;

• componentWillUnmount：这是组件即将被卸载和销毁时调用的方法。在这个方法中，你可以执行一些清理工作，比如清除定时器或移除事件监听器。

解释一下新版本生命周期的新钩子

1. static getDerivedStateFromProps 执行 （新钩子）

这个是 React 新版本中新增的2个钩子之一，据说很少用。

getDerivedStateFromProps 在初始化和更新中都会被调用，并且在 render 方法之前调用，它返回一个对象用来更新 state

getDerivedStateFromProps 是类上直接绑定的静态（static）方法，它接收两个参数 props 和 state

props 是即将要替代 state 的值，而 state 是当前未替代前的值

注意：state 的值在任何时候都取决于传入的 props ，不会再改变

jsx
static getDerivedStateFromProps(props,state) {
    return props
}
ReactDOM.render(<Count count="109"/>,document.getElementById("example"))

count 的值不会改变，一直是 109

1. getSnapshotBeforeUpdate执行 （新钩子）

在最近一次的渲染输出之前被提交之前调用，也就是即将挂载时调用

相当于淘宝购物的快照，会保留下单前的商品内容，在 React 中就相当于是 即将更新前的状态

它可以使组件在 DOM 真正更新之前捕获一些信息（例如滚动位置），此生命周期返回的任何值都会作为参数传递给 componentDidUpdate()。如不需要传递任何值，那么请返回 null

jsx
			//在更新之前获取快照
      getSnapshotBeforeUpdate () {
        console.log('Count---getSnapshotBeforeUpdate');
        return 'atxuechao'
	   }

总结

重要的钩子（工作中常用）

1. render: 渲染方法，返回组件的虚拟DOM表示。
2. componentDidMount: 在组件首次渲染完成后调用，通常用于进行异步数据获取、axios请求、添加事件监听器等副作用操作。
3. componentWillUnmount:作一些收尾的工作（清除定时器）

即将废弃的勾子

1. componentWillMount: 即将废弃，在新版本React中不推荐使用。可以在constructor中进行初始化操作。
2. componentWillReceiveProps: 即将废弃，在新版本React中不推荐使用。可以使用static getDerivedStateFromProps或componentDidUpdate来处理接收到的属性变化。
3. componentWilUpdate：即将废弃并由**getSnapshotBeforeUpdate**取代。getSnapshotBeforeUpdate用于在组件更新之前获取DOM快照，常用于在组件更新后恢复滚动位置或处理其他交互效果。