10分钟理解React生命周期 た 入场券 2024-03-23 18:15 25阅读 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> <p><span style="color:#0d0016;">1</span></p> <p><span style="color:#0d0016;">2</span></p> <p><span style="color:#0d0016;">3</span></p> <p><span style="color:#0d0016;">4</span></p> <p><span style="color:#0d0016;">5</span></p> <p><span style="color:#0d0016;">6</span></p> <p><span style="color:#0d0016;">7</span></p> <p><span style="color:#0d0016;">8</span></p> <p><span style="color:#0d0016;">9</span></p> <p><span style="color:#0d0016;">10</span></p> <p><span style="color:#0d0016;">11</span></p> <p><span style="color:#0d0016;">12</span></p> <p><span style="color:#0d0016;">13</span></p> <p><span style="color:#0d0016;">14</span></p> <p><span style="color:#0d0016;">15</span></p> <p><span style="color:#0d0016;">16</span></p> <p><span style="color:#0d0016;">17</span></p> <p><span style="color:#0d0016;">18</span></p> <p><span style="color:#0d0016;">19</span></p> <p><span style="color:#0d0016;">20</span></p> <p><span style="color:#0d0016;">21</span></p> <p><span style="color:#0d0016;">22</span></p> <p><span style="color:#0d0016;">23</span></p> <p><span style="color:#0d0016;">24</span></p> <p><span style="color:#0d0016;">25</span></p> </td> <td> <p><span style="color:#0d0016;"><code>class</code> <code>MyComponent extends React.Component { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>constructor(props) { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>super(props);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>this</code><code>.state = { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>value: props.initialValue,</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>};</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>this</code><code>.unsubscribe = props.subscribe(</code><code>this</code><code>.handleValueChange);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p></p> <p><span style="color:#0d0016;"><code> </code><code>componentWillUnmount() { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>this</code><code>.unsubscribe();</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p></p> <p><span style="color:#0d0016;"><code> </code><code>handleValueChange = (newValue) => { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>this</code><code>.setState({ value: newValue });</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>};</code></span></p> <p></p> <p><span style="color:#0d0016;"><code> </code><code>render() { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>return</code> <code>(</code></span></p> <p><span style="color:#0d0016;"><code> </code><code><div></code></span></p> <p><span style="color:#0d0016;"><code> </code><code><span>Current value: { </code><code>this</code><code>.state.value}</span></code></span></p> <p><span style="color:#0d0016;"><code> </code><code></div></code></span></p> <p><span style="color:#0d0016;"><code> </code><code>);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p><span style="color:#0d0016;"><code>}</code></span></p> </td> </tr> </tbody> </table> 在上面的代码中,`unsubscribe` 方法是一个用于取消订阅的函数,它在组件创建时通过 `props.subscribe` 方法添加订阅,然后在组件卸载时通过 `componentWillUnmount` 方法进行取消订阅。 #### **2、如果你使用的是普通的 DOM 事件监听器或者 WebSocket 等浏览器原生 API,那么你需要在组件卸载时手动移除事件监听或者关闭 WebSocket 连接等。** #### 例如,使用 `addEventListener` 添加事件监听器的代码可能如下所示: <table> <tbody> <tr> <td> <p><span style="color:#0d0016;">1</span></p> <p><span style="color:#0d0016;">2</span></p> <p><span style="color:#0d0016;">3</span></p> <p><span style="color:#0d0016;">4</span></p> <p><span style="color:#0d0016;">5</span></p> <p><span style="color:#0d0016;">6</span></p> <p><span style="color:#0d0016;">7</span></p> <p><span style="color:#0d0016;">8</span></p> <p><span style="color:#0d0016;">9</span></p> <p><span style="color:#0d0016;">10</span></p> <p><span style="color:#0d0016;">11</span></p> <p><span style="color:#0d0016;">12</span></p> <p><span style="color:#0d0016;">13</span></p> <p><span style="color:#0d0016;">14</span></p> <p><span style="color:#0d0016;">15</span></p> <p><span style="color:#0d0016;">16</span></p> <p><span style="color:#0d0016;">17</span></p> <p><span style="color:#0d0016;">18</span></p> <p><span style="color:#0d0016;">19</span></p> <p><span style="color:#0d0016;">20</span></p> <p><span style="color:#0d0016;">21</span></p> <p><span style="color:#0d0016;">22</span></p> </td> <td> <p><span style="color:#0d0016;"><code>class</code> <code>MyComponent extends React.Component { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>constructor(props) { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>super(props);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>this</code><code>.handleClick = </code><code>this</code><code>.handleClick.bind(</code><code>this</code><code>);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p></p> <p><span style="color:#0d0016;"><code> </code><code>componentDidMount() { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>document.addEventListener(</code><code>'click'</code><code>, </code><code>this</code><code>.handleClick);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p></p> <p><span style="color:#0d0016;"><code> </code><code>componentWillUnmount() { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>document.removeEventListener(</code><code>'click'</code><code>, </code><code>this</code><code>.handleClick);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p></p> <p><span style="color:#0d0016;"><code> </code><code>handleClick(</code><code>event</code><code>) { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>console.log(</code><code>'Clicked!'</code><code>, </code><code>event</code><code>.target);</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p></p> <p><span style="color:#0d0016;"><code> </code><code>render() { </code></span></p> <p><span style="color:#0d0016;"><code> </code><code>return</code> <code><div>Click anywhere to log the target element.</div>;</code></span></p> <p><span style="color:#0d0016;"><code> </code><code>}</code></span></p> <p><span style="color:#0d0016;"><code>}</code></span></p> </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
还没有评论,来说两句吧...