前端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() {
    // 在组件挂载后，将计数数字变为1
    this.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方法。这些生命周期方法帮助我们在组件创建、更新和销毁时执行特定的操作，确保应用程序的正常运行和良好的用户体验。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

(附数据集)基于lora参数微调Qwen1.8chat模型的实战教程

(附数据集)基于lora参数微调Qwen1.8chat模型的实战教程

基于lora微调Qwen1.8chat的实战教程 日期&#xff1a;2024-3-16作者&#xff1a;小知运行环境&#xff1a;jupyterLab描述&#xff1a;基于lora参数微调Qwen1.8chat模型。 样例数据集 - qwen_chat.json&#xff08;小份数据&#xff09; - chat.json&#xff08;中份数据&…
阅读更多...
怎么判断发票扫描OCR软件好用不好用？

怎么判断发票扫描OCR软件好用不好用？

发票扫描OCR&#xff08;Optical Character Recognition&#xff09;是一种将纸质发票上的文字、数字等信息转化为可编辑的文本格式的技术。在现代企业中&#xff0c;随着数字化转型的推进&#xff0c;发票扫描OCR技术变得越来越重要。然而&#xff0c;面对市场上众多的发票扫描…
阅读更多...
如何通过人才测评系统来寻找个人的潜能

如何通过人才测评系统来寻找个人的潜能

潜力这个词&#xff0c;有的时候真是虚无缥缈&#xff0c;人们总说人的潜力是无限&#xff0c;又总说人的潜力是有限的&#xff0c;想一想两句话也都有道理&#xff0c;人的潜能怎么可能无限大&#xff1f;但在某些时候&#xff0c;你也许可以做的更好&#xff0c;但是对于这个…
阅读更多...
C#，动态规划问题中基于单词搜索树（Trie Tree）的单词断句分词（ Word Breaker）算法与源代码

C#，动态规划问题中基于单词搜索树（Trie Tree）的单词断句分词（ Word Breaker）算法与源代码

1 分词 分词是自然语言处理的基础，分词准确度直接决定了后面的词性标注、句法分析、词向量以及文本分析的质量。英文语句使用空格将单词进行分隔，除了某些特定词，如how many，New York等外，大部分情况下不需要考虑分词问题。但有些情况下，没有空格，则需要好的分词算法。…
阅读更多...
【ESP32接入国产大模型之MiniMax】

【ESP32接入国产大模型之MiniMax】

1. MiniMax 讲解视频&#xff1a; ESP32接入语言大模型之MiniMax MM智能助理是一款由MiniMax自研的&#xff0c;没有调用其他产品的接口的大型语言模型。MiniMax是一家中国科技公司&#xff0c;一直致力于进行大模型相关的研究。 随着人工智能技术的不断发展&#xff0c;自然语…
阅读更多...
前端Vue与uni-app中的九宫格、十二宫格和十五宫格菜单组件实现

前端Vue与uni-app中的九宫格、十二宫格和十五宫格菜单组件实现

在前端 Vue 开发中&#xff0c;我们经常会遇到需要开发九宫格、十二宫格和十五宫格菜单按钮的需求。这些菜单按钮通常用于展示不同的内容或功能&#xff0c;提供给用户快速访问和选择。 一、引言 在前端开发中&#xff0c;九宫格、十二宫格和十五宫格菜单按钮是一种常见的布局…
阅读更多...
【Canvas与艺术】下雪籽特效

【Canvas与艺术】下雪籽特效

【要点】 控制一个点的x,y坐标及下落速度&#xff0c;就能画出一个雪籽&#xff1b;创建n个雪籽&#xff0c;下雪籽的模拟效果就有了。 【效果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content…
阅读更多...
VMwareWorkstation16与Ubuntu 22.04.6 LTS下载与安装

VMwareWorkstation16与Ubuntu 22.04.6 LTS下载与安装

一、准备工作 VMware Workstation Pro 16官网下载&#xff1a; https://customerconnect.vmware.com/cn/downloads/info/slug/desktop_end_user_computing/vmware_workstation_pro/16_0。下载需要账号登录。 二、安装 双击exe文件稍等一会会弹出安装程序&#xff0c;如图 这…
阅读更多...
LAMP架构部署--yum安装方式

LAMP架构部署--yum安装方式

这里写目录标题 LAMP架构部署web服务器工作流程web工作流程 yum安装方式安装软件包配置apache启用代理模块 配置虚拟主机配置php验证 LAMP架构部署 web服务器工作流程 web服务器的资源分为两种&#xff0c;静态资源和动态资源 静态资源就是指静态内容&#xff0c;客户端从服…
阅读更多...
Javaweb day17 day18 day19

Javaweb day17 day18 day19

mysql-DDL 数据库操作 写法 客户端工具 &#xff08;也可以使用idea&#xff09; 表 写法 约束 数据类型 案例 写法 表的查询修改删除 写法 删除
阅读更多...
如何在 Linux ubuntu 系统上搭建 Java web 程序的运行环境

如何在 Linux ubuntu 系统上搭建 Java web 程序的运行环境

如何在 Linux ubuntu 系统上搭建 Java web 程序的运行环境 基于包管理器进行安装 Linux 会把一些软件包放到对应的服务器上&#xff0c;通过包管理器这样的程序&#xff0c;来把这些软件包给下载安装 ubuntu系统上的包管理器是 apt centos系统上的包管理器 yum 注&#xff1a;…
阅读更多...
武汉灰京文化：直播游戏新时代的游戏宣传方式

武汉灰京文化：直播游戏新时代的游戏宣传方式

随着互联网和科技的迅速发展&#xff0c;游戏产业也日益繁荣。传统的游戏宣传方式逐渐显现出一些不足&#xff0c;传统的广告渠道和媒体报道在一定程度上已经不能满足游戏行业的需求。然而&#xff0c;随着直播平台的兴起&#xff0c;直播游戏成为了一种新的游戏宣传方式&#…
阅读更多...
2.3 HTML5新增的常用标签

2.3 HTML5新增的常用标签

2.3.1 HTML5新增文档结构标签 在HTML5版本之前通常直接使用<div>标签进行网页整体布局&#xff0c;常见布局包括页眉、页脚、导航菜单和正文部分。为了区分文档结构中不同的<div>内容&#xff0c;一般会为其配上不同的id名称。例如&#xff1a; <div id"h…
阅读更多...
论文阅读——GeoChat（cvpr2024）

论文阅读——GeoChat（cvpr2024）

GeoChat : Grounded Large Vision-Language Model for Remote Sensing 一、引言 GeoChat&#xff0c;将多模态指令调整扩展到遥感领域以训练多任务会话助理。 遥感领域缺乏多模式指令调整对话数据集。受到最近指令调优工作的启发&#xff0c;GeoChat 使用 Vicuna-v1.5和自动化…
阅读更多...
基于Matlab的车牌识别算法，Matlab实现

基于Matlab的车牌识别算法，Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…
阅读更多...
C语言的位操作与位字段

C语言的位操作与位字段

C语言中的位操作允许程序员直接在整型变量的单个位或位组上进行操作。这种操作在许多低级编程任务中非常有用&#xff0c;尤其是在嵌入式系统编程中&#xff0c;如硬件操作、设备驱动及性能优化等场景。位操作主要使用以下几种位操作符&#xff1a; & &#xff08;按位与&a…
阅读更多...
Rabbit MQ详解

Rabbit MQ详解

写在前面,由于Rabbit MQ涉及的内容较多&#xff0c;赶在春招我个人先按照我认为重要的内容进行一定总结&#xff0c;也算是个学习笔记吧。主要参考官方文档、其他优秀文章、大模型问答。自己边学习边总结。后面有时间我会慢慢把所有内容补全&#xff0c;分享出来也是希望可以给…
阅读更多...
软考高级：软件工程螺旋模型概念和例题

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

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…
阅读更多...
小清新卡通人物404错误页面模板源码

小清新卡通人物404错误页面模板源码

小清新卡通人物404错误页面模板源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 小清新卡通人物404错误页面模板源码
阅读更多...
uiCA模拟器和bHive benchmark的使用

uiCA模拟器和bHive benchmark的使用

概念 uiCA 基本块吞吐量预测器 github地址&#xff1a;GitHub - andreas-abel/uiCA: uops.info Code Analyzer uiCA是一个模拟器&#xff0c;可以预测基本块在最新的英特尔微体系结构上的吞吐量。除此之外&#xff0c;它还提供了代码执行的洞察。 uiCA基于来自uops.info的数…
阅读更多...
最新文章

Copyright @ 2022~2023