当前位置: 首页 > news >正文

React生命周期案例详解

React 组件的生命周期是指组件从创建、渲染、更新到卸载的整个过程。在 React 16 及之前的版本中,生命周期方法被分为几个不同的阶段:挂载(Mounting)、更新(Updating)、卸载(Unmounting)以及错误处理(Error Handling,React 16 引入)。但从 React 17 开始,一些生命周期方法被标记为不推荐使用(如 componentWillMount、componentWillReceiveProps、componentWillUpdate),并引入了新的钩子函数 getDerivedStateFromProps 和 componentDidMount(实际上 componentDidMount 在更早的版本就已存在,但这里强调其作为替代某些旧生命周期方法的作用)。在 React 18 中,又引入了新的并发特性,这可能会进一步影响生命周期的概念,但本文主要基于 React 16.x 和 17.x 进行讲解。
挂载(Mounting)
这是组件被插入到 DOM 中的过程。
constructor(props)
类组件的构造函数,初始化 state 或绑定事件处理函数时调用。
jsx
   class MyComponent extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         count: 0
       };
     }
   }
   
static getDerivedStateFromProps(props, state)
当组件实例化后和接收新的 props 时将被调用。它应返回一个对象来更新 state,或者返回 null 来表明新的 props 不需要更新任何 state。
jsx
   class MyComponent extends React.Component {
     static getDerivedStateFromProps(props, state) {
       if (props.count !== state.count) {
         return { count: props.count };
       }
       return null;
     }
   }
   
render()
必须的方法,当组件需要更新时被调用,返回组件要渲染的内容。
jsx
   class MyComponent extends React.Component {
     render() {
       return <div>{this.state.count}</div>;
     }
   }
   
componentDidMount()
组件挂载到 DOM 之后调用。此时可以进行 API 调用、订阅等操作。
jsx
   class MyComponent extends React.Component {
     componentDidMount() {
       // 执行 API 调用等
     }
   }
   
更新(Updating)
组件的 props 或 state 发生变化时会进入更新过程。
static getDerivedStateFromProps(props, state)
组件更新时被调用,用于根据新的 props 来设置 state。
shouldComponentUpdate(nextProps, nextState)
决定组件是否应该更新。默认返回 true。返回 false 会阻止更新。
jsx
   class MyComponent extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
       if (nextProps.count === this.props.count) {
         return false;
       }
       return true;
     }
   }
   
render()
更新后,重新渲染组件。
getSnapshotBeforeUpdate(prevProps, prevState)
真实的 DOM 更新前调用。返回的值作为 componentDidUpdate 的第三个参数。
jsx
   class MyComponent extends React.Component {
     getSnapshotBeforeUpdate(prevProps, prevState) {
       // 例如,记录滚动位置等
       return null;
     }
   }
   
componentDidUpdate(prevProps, prevState, snapshot)
更新后立即调用。可以在这执行 DOM 操作或者执行更多的更新操作。
jsx
   class MyComponent extends React.Component {
     componentDidUpdate(prevProps, prevState, snapshot) {
       // 例如,处理 DOM 更新后的逻辑
     }
   }
   
卸载(Unmounting)
componentWillUnmount()
组件卸载和销毁之前调用。用于执行必要的清理操作,如取消网络请求、移除订阅等。
jsx
   class MyComponent extends React.Component {
     componentWillUnmount() {
       // 清理操作
     }
   }
   
错误处理(Error Handling)
React 16 引入了错误边界的概念,可用以下生命周期方法捕获子组件树的 JavaScript 错误。
static getDerivedStateFromError(error)
当子组件树中有组件抛出错误后,这个生命周期方法会被调用,返回值将作为 state。
componentDidCatch(error, info)
该生命周期方法会在后代组件抛出错误后被调用,可以用来记录错误信息。
错误边界组件示例:
jsx
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // 可以将错误日志上报给你的服务器
    console.log(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}
使用错误边界:
jsx
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>
使用函数组件和 Hooks
在函数组件中,你可以使用 React Hooks 来模拟类组件中的生命周期方法。
useEffect 可以模拟 componentDidMount、componentDidUpdate 和 componentWillUnmount。
useState 和 useReducer 可以初始化 state,类似于 constructor。
useMemo 和 useCallback 可以优化性能,类似于 shouldComponentUpdate 的某些用例。
示例:
jsx
import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 类似于 componentDidMount 和 componentDidUpdate
    document.title = `You clicked ${count} times`;

    // 类似于 componentWillUnmount
    return () => {
      // 清理操作
    };
  }, [count]); // 依赖项数组,类似于 shouldComponentUpdate

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
以上是 React 生命周期的详细解释以及各个阶段对应的代码示例。希望这能帮助你更好地理解 React 组件的生命周期。

 

相关文章:

React生命周期案例详解

React 组件的生命周期是指组件从创建、渲染、更新到卸载的整个过程。在 React 16 及之前的版本中&#xff0c;生命周期方法被分为几个不同的阶段&#xff1a;挂载&#xff08;Mounting&#xff09;、更新&#xff08;Updating&#xff09;、卸载&#xff08;Unmounting&#xf…...

【ubuntu】ubuntu20.04安装显卡驱动

1.安装 点击右下角Apply Changes。 等安装好之后&#xff0c;重启。 现在的nvidia驱动已经很好安装了&#xff0c;比早期时安装出现黑屏等情况好了很多。 2.验证 nvidia-smi...

Mongo Java Driver使用getCollection做分页查询遇到的一些坑

背景 最近在做Mongo上的表数据的迁移&#xff0c;原本应该是DBA要干的活&#xff0c;但是想着DBA排期比较长&#xff0c;加上我们开发的权限又非常有限&#xff0c;而且数据量又没有多少&#xff0c;就想着自己开发个小小的程序从旧实例上查&#xff0c;写到新实例上去算了。于…...

RK3568笔记六十四:SG90驱动测试

若该文为原创文章,转载请注明原文出处。 前面有测试过PWM驱动,现在使用两种方式来产生PWM驱动SG90,实现舵机旋转任意角度 方法一:使用硬件PWM 方法二:使用高精度定时器,GPIO模拟PWM. 一、PWM子系统框架 二、SG90控制方法 舵机的控制需要MCU产生一个周期为20ms的脉冲信号…...

31 基于51单片机的水位监测系统仿真

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机&#xff0c;DHT11温湿度检测&#xff0c;水位检测&#xff0c;通过LCD1602显示&#xff0c;超过阈值报警&#xff0c;继电器驱动电机转动。通过矩阵按键切换选择设置各项参数阈值。 …...

Docker 实践与应用举例

一、容器化Web应用&#xff1a; 创建一个Docker容器来运行一个简单的Web应用&#xff0c;例如一个基于Node.js的Express应用。首先&#xff0c;编写Dockerfile来定义容器的构建过程&#xff0c;然后使用Docker命令来构建和运行容器。 使用Docker Compose来定义和管理多个容器组…...

公开数据集网站分享

参考链接&#xff1a;常用的医学组织切片细胞图像数据集_细胞分割数据集-CSDN博客文章浏览阅读1.3w次&#xff0c;点赞32次&#xff0c;收藏133次。乳腺癌细胞图像数据集、血细胞图像数据集、HE染色切片、疟疾细胞图像图像识别、分类、分割_细胞分割数据集https://blog.csdn.ne…...

实验OSPF路由协议(课内实验)

实验1&#xff1a;OSPF路由协议 实验目的及要求&#xff1a; 通过实验&#xff0c;能够理解链路状态型路由协议OSPF协议的工作原理&#xff0c;掌握如何实现单区域 OSPFv2配置指令&#xff0c;能够熟练的应用各种OSPF协议相关的配置指令完善网络设计。掌握验证OSPFv2网络连接…...

GPU Puzzles讲解(一)

GPU-Puzzles项目可以让你学习到GPU编程和cuda核心并行编程的概念&#xff0c;通过一个个小问题让你理解cuda的编程和调用&#xff0c;创建共享显存空间&#xff0c;实现卷积和矩阵乘法等&#xff0c;通过每个小问题之后还会奖励一个狗狗小视频&#x1f601; 下面是项目的仓库&…...

滚雪球学Oracle[1.3讲]:内存与进程架构

全文目录&#xff1a; 前言一、SGA的深度解析1.1 SGA的作用与构成SGA的大小与调整 1.2 数据库缓冲区缓存&#xff08;DB Cache&#xff09;DB Cache的工作原理案例演示&#xff1a;调整DB Cache的大小 1.3 共享池&#xff08;Shared Pool&#xff09;的构成与调优共享池的组成部…...

Nginx的正向与反向代理

一、Nginx简介 1. 什么是Nginx Nginx&#xff08;发音为“engine-x”&#xff09;是一个高性能的HTTP和反向代理服务器&#xff0c;同时也是一个IMAP/POP3/SMTP代理服务器。Nginx是由俄罗斯的Igor Sysoev&#xff08;伊戈尔赛索耶夫&#xff09;为解决C10k问题&#xff08;即…...

esp8266 at指令链接wifi时一直connect disconnest

那是你的连接wifi的名字密码有误或者热点有问题&#xff0c;看看热点是不是把设备拉入黑名单或者设置为5G或者连了校园网或者设置了最多链接设备...

基于SpringBoot博物馆游客预约系统【附源码】

基于SpringBoot博物馆游客预约系统 效果如下&#xff1a; 主页面 注册界面 展品信息界面 论坛交流界面 后台登陆界面 后台主界面 参观预约界面 留言板界面 研究背景 随着现代社会的快速发展和人们生活水平的提高&#xff0c;文化生活需求也在日益增加。博物馆作为传承文化、…...

【JVM】内存区域划分,类加载的过程,.class文件的格式

一个java写的程序&#xff0c;跑起来就得到了一个java进程&#xff0c;而java进程&#xff1d;JVM上面运行的字节码指令 JVM是「java虚拟机」&#xff0c;负责解释执行java的指令 【JVM内存区域划分】 1.程序计数器&#xff08;比较小的空间&#xff09; 作用:保存了下一条…...

esp32-camera入门(基于ESP-IDF)

主要参考资料&#xff1a; ESP32-S2 Kaluga camera lcd 示例入门: https://blog.csdn.net/Marchtwentytwo/article/details/121121028 摄像头应用方案常见问题汇总: https://docs.espressif.com/projects/esp-faq/zh_CN/latest/application-solution/camera-application.html …...

react中类式组件与函数式组件的区别

在React中&#xff0c;类式组件&#xff08;Class Components&#xff09;与函数式组件&#xff08;Functional Components&#xff09;是两种不同的组件定义方式&#xff0c;它们各有特点&#xff0c;适用于不同的场景。以下是它们之间的主要区别&#xff1a; 一、定义与语法…...

【D3.js in Action 3 精译_030】3.5 给 D3 条形图加注图表标签(下):Krisztina Szűcs 人物专访 + 3.6 本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…...

【重学 MySQL】五十六、位类型

【重学 MySQL】五十六、位类型 定义赋值与使用注意事项应用场景 在MySQL数据库中&#xff0c;位类型&#xff08;BIT类型&#xff09;是一种用于存储位字段值的数据类型。 定义 BIT(n)表示n个位字段值&#xff0c;其中n是一个范围从1到64的整数。这意味着你可以存储从1位到64…...

Centos7 NTP客户端

目录 1. NTP客户端1.1 安装1.2 启动1.3 同步状态异常1.4 更改/etc/chrony.conf配置文件1.5 同步状态正常 1. NTP客户端 1.1 安装 如果chrony没有安装&#xff0c;可以使用以下命令安装 sudo yum install chrony1.2 启动 启动并设置开机自启 sudo systemctl start chronyd …...

手机号归属地查询-手机号归属地-手机号归属地-运营商归属地查询-手机号码归属地查询手机号归属地-运营商归属地

手机号归属地查询API接口是一种网络服务接口&#xff0c;允许开发者通过编程方式查询手机号码的注册地信息。关于快证签API接口提供的手机号归属地查询服务&#xff0c;以下是一些关键信息&#xff1a; 一、快证签API接口简介 快证签API接口可能是一个提供多种验证和查询服务…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本&#xff0c;基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...

Android Framework预装traceroute执行文件到system/bin下

文章目录 Android SDK中寻找traceroute代码内置traceroute到SDK中traceroute参数说明-I 参数&#xff08;使用 ICMP Echo 请求&#xff09;-T 参数&#xff08;使用 TCP SYN 包&#xff09; 相关文章 Android SDK中寻找traceroute代码 设备使用的是Android 11&#xff0c;在/s…...

【AI News | 20250609】每日AI进展

AI Repos 1、OpenHands-Versa OpenHands-Versa 是一个通用型 AI 智能体&#xff0c;通过结合代码编辑与执行、网络搜索、多模态网络浏览和文件访问等通用工具&#xff0c;在软件工程、网络导航和工作流自动化等多个领域展现出卓越性能。它在 SWE-Bench Multimodal、GAIA 和 Th…...

【Pandas】pandas DataFrame dropna

Pandas2.2 DataFrame Missing data handling 方法描述DataFrame.fillna([value, method, axis, …])用于填充 DataFrame 中的缺失值&#xff08;NaN&#xff09;DataFrame.backfill(*[, axis, inplace, …])用于**使用后向填充&#xff08;即“下一个有效观测值”&#xff09…...

结合PDE反应扩散方程与物理信息神经网络(PINN)进行稀疏数据预测的技术方案

以下是一个结合PDE反应扩散方程与物理信息神经网络(PINN)进行稀疏数据预测的技术方案,包含完整数学推导、PyTorch/TensorFlow双框架实现代码及对比实验分析。 基于PINN的反应扩散方程稀疏数据预测与大规模数据泛化能力研究 1. 问题定义与数学模型 1.1 反应扩散方程 考虑标…...