10分钟理解React生命周期

た入场券 2024-03-23 18:15 90阅读 0赞

### **前言** ###

学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助。

### **一、简介** ###

React /riˈækt/ 组件的生命周期指的是**组件**从**创建**到**销毁**过程中所经历的一系列方法调用。这些方法可以让我们在不同的时刻执行特定的代码，以满足组件的需求。

React 的生命周期可以分为三个阶段：**挂载阶段**、**更新阶段**和**卸载阶段**。每个阶段都有对应的生命周期方法，如下所示：

### **二、生命周期三个阶段** ###

**挂载阶段**

*  **constructor()** ：/kənˈstrʌktə(r)/ 构造函数，最先被执行,我们通常在构造函数里初始化`state`对象或者给自定义方法绑定`this`
 *  **static getDerivedStateFromProps()** ：`static getDerivedStateFromProps(nextProps, prevState)`，这是个静态方法,当我们接收到新的属性想去修改`state`，可以使用`getDerivedStateFromProps`
 *  **render()** ： /ˈrendə(r)/ `render`函数是纯函数，只返回需要渲染的东西，不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容
 *  **componentDidMount()**：组件装载之后调用，此时可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在`componentWillUnmount`中取消订阅。  
    `componentWillUnmount`中取消订阅。

#### **1、在 `componentWillUnmount` 生命周期方法中，我们可以执行一些清理工作，比如取消订阅或者清除定时器等。** ####

取消订阅是指在组件卸载之前，将之前添加的事件监听或者数据订阅取消掉，以避免内存泄漏和无效的数据处理。

具体实现方法取决于你所使用的订阅方式。如果你使用的是 React Context API 或者 Redux 等状态管理库，则可以在 `componentWillUnmount` 方法中取消订阅。例如，使用 React Context API 订阅状态更新的代码可能如下所示：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </td> 
 <td> <code>class</code>&nbsp;<code>MyComponent extends React.Component { </code> <code>&nbsp;&nbsp;</code><code>constructor(props) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super(props);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.state = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>value: props.initialValue,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.unsubscribe = props.subscribe(</code><code>this</code><code>.handleValueChange);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>componentWillUnmount() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.unsubscribe();</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>handleValueChange = (newValue) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.setState({ value: newValue });</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>render() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;span&gt;Current value: { </code><code>this</code><code>.state.value}&lt;/span&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

在上面的代码中，`unsubscribe` 方法是一个用于取消订阅的函数，它在组件创建时通过 `props.subscribe` 方法添加订阅，然后在组件卸载时通过 `componentWillUnmount` 方法进行取消订阅。

#### **2、如果你使用的是普通的 DOM 事件监听器或者 WebSocket 等浏览器原生 API，那么你需要在组件卸载时手动移除事件监听或者关闭 WebSocket 连接等。** ####

例如，使用 `addEventListener` 添加事件监听器的代码可能如下所示：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td> <code>class</code>&nbsp;<code>MyComponent extends React.Component { </code> <code>&nbsp;&nbsp;</code><code>constructor(props) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super(props);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.handleClick =&nbsp;</code><code>this</code><code>.handleClick.bind(</code><code>this</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>componentDidMount() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.addEventListener(</code><code>'click'</code><code>,&nbsp;</code><code>this</code><code>.handleClick);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>componentWillUnmount() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.removeEventListener(</code><code>'click'</code><code>,&nbsp;</code><code>this</code><code>.handleClick);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>handleClick(</code><code>event</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'Clicked!'</code><code>,&nbsp;</code><code>event</code><code>.target);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>render() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>&lt;div&gt;Click anywhere to log the target element.&lt;/div&gt;;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

在上面的代码中，我们在组件挂载时通过 `addEventListener` 方法添加了一个 `click` 事件监听器，然后在组件卸载时通过 `removeEventListener` 方法移除该监听器。这样可以确保在组件卸载时不会再接收到无效的事件通知。

**更新阶段**

*  static getDerivedStateFromProps()　/ˈstætɪk/ /dɪˈraɪvd/ /steɪt/ /prɒps/　此方法在更新个挂载阶段都可能会调用
 *  shouldComponentUpdate() `shouldComponentUpdate(nextProps, nextState)`，有两个参数`nextProps`和`nextState`，表示新的属性和变化之后的`state`，返回一个布尔值，`true`表示会触发重新渲染，`false`表示不会触发重新渲染，默认返回`true`,我们通常利用此生命周期来优化React程序性能
 *  render() 更新阶段也会触发此生命周期
 *  getSnapshotBeforeUpdate() `getSnapshotBeforeUpdate(prevProps, prevState)`，这个方法在`render`之后，`componentDidUpdate`之前调用，有两个参数`prevProps`和`prevState`，表示之前的属性和之前的`state`，这个函数有一个返回值，会作为第三个参数传给`componentDidUpdate`，如果你不想要返回值，可以返回null，此生命周期必须与`componentDidUpdate`搭配使用
 *  componentDidUpdate() `componentDidUpdate(prevProps, prevState, snapshot)`，该方法在`getSnapshotBeforeUpdate`方法之后被调用，有三个参数`prevProps`，`prevState`，`snapshot`，表示之前的props，之前的state，和snapshot。第三个参数是`getSnapshotBeforeUpdate`返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至`getSnapshotBeforeUpdate`，然后在 `componentDidUpdate`中统一触发回调或更新状态。

**卸载阶段**

*  componentWillUnmount() 当组件被卸载或者销毁了就会调用，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作

这些生命周期方法按照顺序依次被调用。在挂载阶段，组件被创建并插入到 DOM 树中。在更新阶段，组件的 props 或者 state 发生改变时会触发更新，从而重新渲染组件。最后，在卸载阶段，组件被从 DOM 树中移除并销毁。

每个生命周期方法都有不同的作用，可以用来实现各种需求，比如在组件挂载时进行初始化工作、在组件更新时进行数据处理或者在组件卸载时进行清理工作等。

![f693a674df40225aea06a770d84c8b8d.png][]

### **低代码领域的工具介绍** ###

JNPF快速开发平台通过高度的抽象，可以将页面元素封装为基础组件和业务组件，将业务规则、权限等封装为规则配置、公式和可拖拽的流程设计器，通过拖拽以及配置，无需写代码，即可完成符合业务需求的应用系统搭建。

它是基于SpringBoot+Vue3的全栈开发平台，支持微服务、前后端分离架构，基于可视化流程建模、表单建模、报表建模工具，快速构建业务应用，平台支持本地化部署，也支持K8S部署。值得一说的在于全源码交付。

应用链接：[https://www.jnpfsoft.com/?csdn][https_www.jnpfsoft.com_csdn]，自己体验看看！

低代码应用平台的核心价值在于运行应用所依赖的基础架构，改变了应用交付和管理的模式，大幅缩减交付周期，最终帮助业务加速创新。也就是说如果低代码平台的打造核心一直盯着少写代码的话，产品很大概率会走偏。

如果你是不会代码的普通员工，深刻了解业务但却厌倦了求人做开发的日子，JNPF会给你一个全新的身份——「低代码开发者」。

[f693a674df40225aea06a770d84c8b8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ecd68883583e443f8bd3fbbb97178f3a.png
[https_www.jnpfsoft.com_csdn]: https://www.jnpfsoft.com/?csdn