前端React篇之React的生命周期有哪些？

目录

  • React的生命周期有哪些？
    • 挂载阶段（Mounting）
    • 更新阶段（Updating）
    • 卸载阶段（Unmounting）
    • 错误处理阶段（Error Handling）
  • React常见的生命周期
  • React主要生命周期

React的生命周期有哪些？

请添加图片描述

在React中，组件的生命周期经历了不同阶段，每个阶段都有对应的生命周期方法。以下是React 16版本之后的组件生命周期方法：

  1. 挂载阶段（Mounting）：

    • constructor(props)：组件的构造函数，在创建组件时调用，用于初始化状态和绑定事件处理方法。
    • static getDerivedStateFromProps(props, state)：在组件实例化时和接收新的props时调用，用于根据props更新state。
    • render()：准备渲染组件的UI结构。
    • componentDidMount()：组件第一次渲染完成后调用，通常用于执行一次性的操作，如数据获取、订阅事件等。

  2. 更新阶段（Updating）：

    • static getDerivedStateFromProps(props, state)：在组件接收新的props时调用，用于根据新的props更新state。
    • shouldComponentUpdate(nextProps, nextState)：决定组件是否需要重新渲染，可以通过返回false来阻止不必要的渲染。
    • render()：重新渲染组件的UI结构。
    • getSnapshotBeforeUpdate(prevProps, prevState)：在最近一次渲染输出（提交到 DOM 上）之前调用，可以用于获取当前 DOM 的快照信息。
    • componentDidUpdate(prevProps, prevState, snapshot)：组件更新完成后调用，通常用于处理更新后的操作，如数据同步、DOM 操作等。

  3. 卸载阶段（Unmounting）：

    • componentWillUnmount()：组件即将被卸载和销毁时调用，用于清理定时器、取消订阅等操作。

  4. 错误处理阶段（Error Handling）：

    • static getDerivedStateFromError(error)：当子组件抛出错误时调用，用于更新组件的state以渲染降级 UI。
    • componentDidCatch(error, info)：用于捕获组件内部的 JavaScript 错误、网络请求失败等异常情况，并进行错误处理。

  5. 新的生命周期方法（可选）：

    • static getDerivedStateFromError(error) 和 componentDidCatch(error, info) 是 React 16 引入的新的错误处理生命周期方法。

这些生命周期方法在组件的不同阶段被调用，开发者可以利用这些方法来管理组件的状态、执行特定的操作或者处理错误。值得注意的是，随着React版本的更新，一些生命周期方法可能会被废弃或者替代，因此在使用时需要留意官方文档的更新。

挂载阶段（Mounting）

在React组件的挂载阶段（Mounting Phase）中会依次执行以下方法：

  1. constructor(props)：

    • 构造函数，在创建组件时调用，用于初始化状态和绑定事件处理方法。
    • 在构造函数中通常做两件事情：初始化组件的状态和绑定事件处理方法。
    • 如果不需要初始化state或绑定方法，则不需要显式定义构造函数。

  2. static getDerivedStateFromProps(props, state)：

    • 静态方法，用于根据props更新state。
    • 在组件实例化时和接收新props时调用，返回一个对象来更新当前state，如果不需要更新可以返回null。
    • 在React 16.4版本及以上，setState和forceUpdate也会触发该生命周期方法。

  3. render()：

    • 渲染方法，准备渲染组件的UI结构。
    • 根据状态state和属性props渲染组件，返回需要渲染的内容。
    • 只做一件事情：返回需要渲染的内容，不要在这个方法内部做其他业务逻辑。

  4. componentDidMount()：

    • 在组件第一次渲染完成后调用，通常用于执行一次性操作，如数据获取、订阅事件等。
    • 可以执行依赖于DOM的操作、发送网络请求、添加订阅消息等。
    • 避免在componentDidMount中直接调用setState，因为会触发额外的渲染。

下面是一个示例代码，展示了挂载阶段的一些典型使用方法：

import React, { Component } from 'react';class SampleComponent extends Component {constructor(props) {super(props);this.state = {counter: 0,preCounter: 0};}static getDerivedStateFromProps(props, state) {if (props.counter !== state.preCounter) {return {counter: props.counter,preCounter: props.counter};}return null;}componentDidMount() {// 在组件挂载后，将计数数字变为1this.setState({counter: 1});}render() {return (<div><h1>Hello, world! {this.state.counter}</h1></div>);}
}export default SampleComponent;

在这个示例中，我们展示了挂载阶段的相关方法的使用，包括constructor、getDerivedStateFromProps、render和componentDidMount。这些方法在组件的挂载阶段依次被调用，执行相应的操作以完成组件的初始化和渲染。

更新阶段（Updating）

更新阶段（Updating）涉及到组件在接收到新的props或者状态发生变化时的一系列生命周期方法。

  1. static getDerivedStateFromProps(props, state)：

    • 当组件接收到新的props时调用，在这个方法中可以根据新的props来更新组件的state。
    • 通过返回一个对象来更新当前的state，如果不需要更新则返回null。

  2. shouldComponentUpdate(nextProps, nextState)：

    • 用于决定组件是否需要重新渲染，可以通过返回false来阻止不必要的渲染。
    • 在这个方法中可以比较当前的props和state与下一个props和state的值，来决定是否需要更新。

  3. render()：

    • 重新渲染组件的UI结构，根据最新的props和state生成组件的内容。

  4. getSnapshotBeforeUpdate(prevProps, prevState)：

    • 在最近一次渲染输出（提交到DOM上）之前调用，可以用于获取当前DOM的快照信息。
    • 返回的值将作为第三个参数传递给componentDidUpdate方法。

  5. componentDidUpdate(prevProps, prevState, snapshot)：

    • 组件更新完成后调用，通常用于处理更新后的操作，如数据同步、DOM操作等。
    • 可以在这个方法中执行依赖于更新后DOM状态的操作。

在更新阶段，组件可能会多次重新渲染，这些生命周期方法帮助我们控制组件的更新行为，提高性能并确保组件状态的正确性。通过合理地使用这些方法，我们可以在组件更新时做出相应的处理，保持组件的稳定性和效率。

卸载阶段（Unmounting）

在卸载阶段，只有一个生命周期函数，即componentWillUnmount()。这个方法会在组件即将被卸载和销毁之前被调用。在componentWillUnmount()中，我们可以执行一些必要的清理操作，比如：

  • 清除定时器
  • 取消网络请求
  • 取消在componentDidMount()中创建的订阅等操作

在componentWillUnmount()中的主要目的是确保在组件被卸载和销毁之前进行任何必要的清理工作，以避免内存泄漏或其他不必要的资源占用。在这个阶段，我们不应该再使用setState，因为组件一旦被卸载，就不会再被挂载，也就不会触发重新渲染。

通过在componentWillUnmount()中进行适当的清理操作，我们可以确保组件在被销毁时表现良好，并且避免潜在的问题。这有助于保持应用的性能和稳定性。

错误处理阶段（Error Handling）

在React中，有两个生命周期方法用于处理组件内部错误的情况：

  1. static getDerivedStateFromError(error)：

    • 当子组件抛出错误时调用，用于更新父组件的state以渲染降级UI（Fallback UI）。
    • 这个静态方法允许父组件捕获子组件抛出的错误，并在发生错误时更新状态，以渲染备用UI来展示用户。

  2. componentDidCatch(error, info)：

    • 在后代组件抛出错误后被调用，用于捕获组件内部的JavaScript错误、网络请求失败等异常情况，进行错误处理。
    • 接收两个参数：
      • error：表示抛出的错误对象。
      • info：一个对象，其中包含有关组件引发错误的堆栈信息，通常包含componentStack等信息。

这两个生命周期方法在React中用于提供更好的错误处理机制，使得我们能够更好地管理和展示应用程序中出现的错误情况。通过适当地使用这些方法，我们可以优雅地处理组件可能出现的错误，并向用户提供更好的用户体验。

React常见的生命周期

请添加图片描述

React常见生命周期的过程大致如下：

  1. 挂载阶段：

    • 首先执行constructor构造方法，用于创建组件实例。
    • 接着执行render方法，返回需要渲染的内容。
    • React将渲染内容挂载到DOM树上。
    • 挂载完成后会执行componentDidMount生命周期函数，允许执行一些初始化操作，如数据获取或订阅事件。

  2. 更新阶段：

    • 当组件接收到新的props或调用setState、forceUpdate时，会重新调用render方法。
    • render方法返回的内容将会重新挂载到DOM树上。
    • 挂载完成后会执行componentDidUpdate生命周期函数，可以执行更新后的操作，如数据同步或DOM操作。

  3. 卸载阶段：

    • 当移除组件时，执行componentWillUnmount生命周期函数，用于清理工作，如清除定时器或取消订阅。

在React中，生命周期方法的执行顺序和作用是非常重要的，通过合理使用这些生命周期方法，我们可以控制组件的行为，确保应用程序的正常运行，并且能够在适当的时机执行特定的逻辑。

React主要生命周期

  1. getDefaultProps：在组件创建之前调用一次，用来初始化组件的Props（属性）。

  2. getInitialState：用于初始化组件的state（状态）值。

  3. componentWillMount：在React旧版本中存在，但在React 16中已被废弃。在组件创建后、render之前调用，已不推荐在此阶段执行任何操作。

  4. render：是唯一必须实现的生命周期方法。根据props和state返回一个jsx元素，用于渲染组件到界面上。有时也可返回null或false。

  5. componentDidMount：在组件挂载后立即调用，表示组件挂载完成。适合执行需要DOM操作或发起网络请求的操作，因为此时组件已经插入DOM树中。这也是推荐用于发起网络请求的时机。

这些生命周期方法的合理使用能够帮助我们控制组件的行为，确保组件的状态和Props得到正确处理，以及在适当的时机执行特定的逻辑操作。随着React版本的更新，有些生命周期方法被废弃或不推荐使用，因此了解最新的React生命周期方法也很重要。

持续学习总结记录中，回顾一下上面的内容：
React的生命周期包括几个重要阶段：首先是挂载阶段，包括constructor构造函数、render渲染方法和componentDidMount挂载完成方法；接着是更新阶段，涵盖shouldComponentUpdate、render和componentDidUpdate方法；最后是卸载阶段，包括componentWillUnmount方法。这些生命周期方法帮助我们在组件创建、更新和销毁时执行特定的操作，确保应用程序的正常运行和良好的用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/544860.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

神经网络中激活函数的绘制——阶跃函数、sigmoid函数、ReLU函数

神经网络中激活函数的绘制——阶跃函数、sigmoid函数、ReLU函数

一、阶跃函数 import numpy as np import matplotlib.pylab as plt def step_function(x):return np.array(x>0)x np.arange(-5.0,5.0,0.1) y step_function(x) plt.plot(x, y) plt.ylim(-0.1, 1.1) plt.show() 二、sigmoid函数 import numpy as np import matplotlib.p…
阅读更多...
如果要做优化，CSS提高性能的方法有哪些？

如果要做优化，CSS提高性能的方法有哪些？

文章目录 一、前言二、实现方式内联首屏关键CSS异步加载CSS资源压缩合理使用选择器减少使用昂贵的属性不要使用import其他 三、总结参考文献 一、前言 每一个网页都离不开css&#xff0c;但是很多人又认为&#xff0c;css主要是用来完成页面布局的&#xff0c;像一些细节或者优…
阅读更多...
智慧公厕对于智慧城市管理的意义

智慧公厕对于智慧城市管理的意义

近年来&#xff0c;智慧城市的概念不断被提及&#xff0c;而智慧公厕作为智慧城市管理的重要组成部分&#xff0c;其在监测、管理和养护方面发挥着重要的作用。智慧公厕不仅是城市市容提升的重要保障&#xff0c;还能提升城市环境卫生管理的质量&#xff0c;并有效助力创造清洁…
阅读更多...
【代码随想录】【回溯算法】补day24：组合问题以及组合的优化

【代码随想录】【回溯算法】补day24：组合问题以及组合的优化

回溯算法&#xff1a;递归函数里面嵌套着for循环 给定两个整数 n 和 k&#xff0c;返回 1 … n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4], ] 包含组合问题和组合问题的剪枝优化 class solution:def combine(se…
阅读更多...
离线LaTex公式识别工具V0.9开发

离线LaTex公式识别工具V0.9开发

离线LaTex公式识别工具V0.9开发 文章目录 离线LaTex公式识别工具V0.9开发工程来源GUI界面streamlit 模型文件离线调用Pix2TexttexifyNougat-LaTex 打包成exepyinstaller打包方法pyinstaller打包遇到的问题File "subprocess.py", line 1420, in _execute_child FileNo…
阅读更多...
数据结构的概念大合集03（栈）

数据结构的概念大合集03（栈）

概念大合集03 1、栈1.1 栈的定义和特点1.2 栈的基础操作1.3 栈的顺序存储1.3.1 顺序栈1.3.2 栈空&#xff0c;栈满&#xff0c;进栈&#xff0c;出栈的基本思想1.3.3 共享栈1.3.3.1 共享栈的4要素 1.4 栈的链式存储1.4.1 链栈的实现1.4.2 链栈的4个要素 1、栈 1.1 栈的定义和特…
阅读更多...
软考高级：软件工程螺旋模型概念和例题

软考高级：软件工程螺旋模型概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…
阅读更多...
科研绘图一：箱线图（添加贝赛尔曲线）

科研绘图一：箱线图（添加贝赛尔曲线）

R语言绘图系列—箱线图贝赛尔曲线 &#xff08;一&#xff09;: 科研绘图一&#xff1a;箱线图&#xff08;添加贝赛尔曲线&#xff09; 文章目录 R语言绘图系列---箱线图贝赛尔曲线&#xff08;一&#xff09;: 科研绘图一&#xff1a;箱线图&#xff08;添加贝赛尔曲线&…
阅读更多...
【人工智能】英文学习材料（每日一句）

【人工智能】英文学习材料（每日一句）

#学习笔记# 目录 1.Natural Language Processing&#xff0c;NLP&#xff08;自然语言处理&#xff09; 2.Machine Learing&#xff0c;ML&#xff08;机器学习&#xff09; 3.Neural Networks&#xff08;神经网络&#xff09; 4.Deep Learing&#xff08;深度学习&#…
阅读更多...
GiT: Towards Generalist Vision Transformer through Universal Language Interface

GiT: Towards Generalist Vision Transformer through Universal Language Interface

GiT: Towards Generalist Vision Transformer through Universal Language Interface 相关链接&#xff1a;arxiv github 关键字&#xff1a;Generalist Vision Transformer (GiT)、Universal Language Interface、Multi-task Learning、Zero-shot Transfer、Transformer 摘要 …
阅读更多...
浏览器如何进行静态资源缓存？—— 强缓存 协商缓存

浏览器如何进行静态资源缓存？—— 强缓存 协商缓存

在平时使用浏览器排查问题的过程中&#xff0c;我们有时会看到浏览器网络请求中出现304状态码&#xff0c;那么是什么情况下出现304呢&#xff1f;下面是关于这一现象的解释&#xff1a; 浏览器如何进行静态资源缓存&#xff1f;—— 强缓存 & 协商缓存 状态码 304浏览器如…
阅读更多...
GET和POST方法的区别

GET和POST方法的区别

GET和POST的区别 在我们开发项目的时候常常会在Controller层使用到POST方法或者GET方法&#xff0c;犹豫到底将接口定义为GET方法还是POST方法&#xff1f;那这两者之间有什么区别呢&#xff1f; 看一下官方定义&#xff1a; GET 和 POST 是 HTTP 协议中最常用的两种请求方法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023