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

【React】React 生命周期完全指南


鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础
💫个人格言: "如无必要,勿增实体"


文章目录

  • React 生命周期完全指南
    • 一、生命周期概述
    • 二、生命周期的三个阶段
      • 2.1 挂载阶段(Mounting)
      • 2.2 更新阶段(Updating)
      • 2.3 卸载阶段(Unmounting)
    • 三、常用生命周期方法详解
      • 3.1 constructor(构造函数)
      • 3.2 componentDidMount
      • 3.3 componentDidUpdate
      • 3.4 componentWillUnmount
    • 四、生命周期的最佳实践
      • 4.1 性能优化
      • 4.2 错误处理
    • 五、新旧生命周期的变化
      • 5.1 已废弃的生命周期方法
      • 5.2 新增的生命周期方法
    • 六、Hooks 时代的生命周期
    • 七、总结

React 生命周期完全指南

在这里插入图片描述

一、生命周期概述

React 组件的生命周期是指组件从创建、更新到销毁的整个过程。合理地使用生命周期方法可以让我们更好地控制组件的行为,优化性能,并处理副作用。

二、生命周期的三个阶段

2.1 挂载阶段(Mounting)

组件实例被创建并插入 DOM 的过程

class MyComponent extends React.Component {// 1. 构造函数constructor(props) {super(props);this.state = { count: 0 };console.log('1. constructor');}// 2. 静态方法,很少使用static getDerivedStateFromProps(props, state) {console.log('2. getDerivedStateFromProps');return null;}// 3. 渲染方法render() {console.log('3. render');return <div>{this.state.count}</div>;}// 4. 挂载完成componentDidMount() {console.log('4. componentDidMount');}
}

2.2 更新阶段(Updating)

当组件的 props 或 state 发生变化时触发更新

class MyComponent extends React.Component {// 1. 静态方法static getDerivedStateFromProps(props, state) {return null;}// 2. 是否应该更新shouldComponentUpdate(nextProps, nextState) {return true;}// 3. 渲染render() {return <div>{this.state.count}</div>;}// 4. 获取更新前的快照getSnapshotBeforeUpdate(prevProps, prevState) {return null;}// 5. 更新完成componentDidUpdate(prevProps, prevState, snapshot) {// 处理更新后的操作}
}

2.3 卸载阶段(Unmounting)

组件从 DOM 中移除的过程

class MyComponent extends React.Component {componentWillUnmount() {// 清理工作,比如清除定时器、取消订阅等console.log('组件即将卸载');}
}

三、常用生命周期方法详解

在这里插入图片描述

3.1 constructor(构造函数)

constructor(props) {super(props);// 初始化状态this.state = {count: 0,data: []};// 绑定方法this.handleClick = this.handleClick.bind(this);
}

使用场景:

  • 初始化组件的 state
  • 绑定事件处理方法
  • 不要在这里调用 setState
  • 避免在这里执行副作用操作

3.2 componentDidMount

componentDidMount() {// 发起网络请求fetch('api/data').then(res => res.json()).then(data => {this.setState({ data });});// 添加事件监听window.addEventListener('resize', this.handleResize);// 设置定时器this.timer = setInterval(() => {this.setState(state => ({count: state.count + 1}));}, 1000);
}

使用场景:

  • 发起网络请求
  • DOM 操作
  • 添加订阅
  • 设置定时器

3.3 componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot) {// 比较 props 变化if (this.props.userID !== prevProps.userID) {this.fetchData(this.props.userID);}// 比较 state 变化if (this.state.count !== prevState.count) {document.title = `点击次数:${this.state.count}`;}
}

使用场景:

  • 对比更新前后的数据
  • 根据条件执行副作用
  • 注意避免无限循环

3.4 componentWillUnmount

componentWillUnmount() {// 清除定时器clearInterval(this.timer);// 移除事件监听window.removeEventListener('resize', this.handleResize);// 取消订阅this.subscription.unsubscribe();
}

使用场景:

  • 清理定时器
  • 取消网络请求
  • 清除事件监听
  • 取消订阅

四、生命周期的最佳实践

4.1 性能优化

class OptimizedComponent extends React.Component {shouldComponentUpdate(nextProps, nextState) {// 只在必要时更新return (this.props.value !== nextProps.value ||this.state.count !== nextState.count);}render() {return (<div><h1>{this.props.value}</h1><p>{this.state.count}</p></div>);}
}

4.2 错误处理

class ErrorBoundary extends React.Component {state = { hasError: false };static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {// 记录错误日志console.error('错误信息:', error);console.error('错误详情:', errorInfo);}render() {if (this.state.hasError) {return <h1>出错了!</h1>;}return this.props.children;}
}

五、新旧生命周期的变化

5.1 已废弃的生命周期方法

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

5.2 新增的生命周期方法

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

六、Hooks 时代的生命周期

在这里插入图片描述

function HooksComponent() {// 相当于 constructor 和 componentDidMountconst [count, setCount] = useState(0);// 相当于 componentDidMount 和 componentDidUpdateuseEffect(() => {document.title = `点击次数:${count}`;}, [count]);// 相当于 componentDidMount 和 componentWillUnmountuseEffect(() => {const handler = () => console.log('窗口大小改变');window.addEventListener('resize', handler);// 清理函数return () => {window.removeEventListener('resize', handler);};}, []);return <div>计数:{count}</div>;
}

七、总结

React 生命周期方法为我们提供了在组件不同阶段执行代码的机会。合理使用这些方法可以:

  1. 优化组件性能
  2. 正确处理副作用
  3. 管理组件状态
  4. 避免内存泄漏

在实际开发中,最常用的生命周期方法是:

  • constructor:初始化
  • componentDidMount:副作用处理
  • componentDidUpdate:更新后的操作
  • componentWillUnmount:清理工作

随着 React Hooks 的普及,函数组件正在逐渐取代类组件。但理解生命周期概念对于深入理解 React 的工作原理仍然至关重要。

End

相关文章:

【React】React 生命周期完全指南

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 React 生命周期完全指南一、生命周期概述二、生命周期的三个阶段2.1 挂载阶段&a…...

【NLP】使用 SpaCy、ollama 创建用于命名实体识别的合成数据集

命名实体识别 (NER) 是自然语言处理 (NLP) 中的一项重要任务&#xff0c;用于自动识别和分类文本中的实体&#xff0c;例如人物、位置、组织等。尽管它很重要&#xff0c;但手动注释大型数据集以进行 NER 既耗时又费钱。受本文 ( https://huggingface.co/blog/synthetic-data-s…...

【C++练习】二进制到十进制的转换器

题目&#xff1a;二进制到十进制的转换器 描述 编写一个程序&#xff0c;将用户输入的8位二进制数转换成对应的十进制数并输出。如果用户输入的二进制数不是8位&#xff0c;则程序应提示用户输入无效&#xff0c;并终止运行。 要求 程序应首先提示用户输入一个8位二进制数。…...

Vue功能菜单的异步加载、动态渲染

实际的Vue应用中&#xff0c;常常需要提供功能菜单&#xff0c;例如&#xff1a;文件下载、用户注册、数据采集、信息查询等等。每个功能菜单项&#xff0c;对应某个.vue组件。下面的代码&#xff0c;提供了一种独特的异步加载、动态渲染功能菜单的构建方法&#xff1a; <s…...

云技术基础学习(一)

内容预览 ≧∀≦ゞ 声明导语云技术历史 云服务概述云服务商与部署模式1. 公有云服务商2. 私有云部署3. 混合云模式 云服务分类1. 基础设施即服务&#xff08;IaaS&#xff09;2. 平台即服务&#xff08;PaaS&#xff09;3. 软件即服务&#xff08;SaaS&#xff09; 云架构云架构…...

【优选算法篇】微位至简,数之恢宏——解构 C++ 位运算中的理与美

文章目录 C 位运算详解&#xff1a;基础题解与思维分析前言第一章&#xff1a;位运算基础应用1.1 判断字符是否唯一&#xff08;easy&#xff09;解法&#xff08;位图的思想&#xff09;C 代码实现易错点提示时间复杂度和空间复杂度 1.2 丢失的数字&#xff08;easy&#xff0…...

MFC工控项目实例二十九主对话框调用子对话框设定参数值

在主对话框调用子对话框设定参数值&#xff0c;使用theApp变量实现。 子对话框各参数变量 CString m_strTypeName; CString m_strBrand; CString m_strRemark; double m_edit_min; double m_edit_max; double m_edit_time2; double …...

Java | Leetcode Java题解之第546题移除盒子

题目&#xff1a; 题解&#xff1a; class Solution {int[][][] dp;public int removeBoxes(int[] boxes) {int length boxes.length;dp new int[length][length][length];return calculatePoints(boxes, 0, length - 1, 0);}public int calculatePoints(int[] boxes, int l…...

【前端】Svelte:响应性声明

Svelte 的响应性声明机制简化了动态更新 UI 的过程&#xff0c;让开发者不需要手动追踪数据变化。通过 $ 前缀与响应式声明语法&#xff0c;Svelte 能够自动追踪依赖关系&#xff0c;实现数据变化时的自动重新渲染。在本教程中&#xff0c;我们将详细探讨 Svelte 的响应性声明机…...

PostgreSQL 性能优化全方位指南:深度提升数据库效率

PostgreSQL 性能优化全方位指南&#xff1a;深度提升数据库效率 别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01; 在现代互联网应用中&#xff0c;数据库性能优化是系统优化中至关重要的一环&#xff0c;尤其对于数据密集型和高并发的应用而言&am…...

Flutter鸿蒙next 使用 BLoC 模式进行状态管理详解

1. 引言 在 Flutter 中&#xff0c;随着应用规模的扩大&#xff0c;管理应用中的状态变得越来越复杂。为了处理这种复杂性&#xff0c;许多开发者选择使用不同的状态管理方案。其中&#xff0c;BLoC&#xff08;Business Logic Component&#xff09;模式作为一种流行的状态管…...

Gen-RecSys——一个通过生成和大规模语言模型发展起来的推荐系统

概述 生成模型的进步对推荐系统的发展产生了重大影响。传统的推荐系统是 “狭隘的专家”&#xff0c;只能捕捉特定领域内的用户偏好和项目特征&#xff0c;而现在生成模型增强了这些系统的功能&#xff0c;据报道&#xff0c;其性能优于传统方法。这些模型为推荐的概念和实施带…...

Android 重新定义一个广播修改系统时间,避免系统时间混乱

有时候&#xff0c;搞不懂为什么手机设备无法准确定义系统时间&#xff0c;出现混乱或显示与实际不符&#xff0c;需要重置或重新设定一次才行&#xff0c;也是真的够无语的&#xff01;&#xff01; vendor/mediatek/proprietary/packages/apps/MtkSettings/AndroidManifest.…...

第3章:角色扮演提示-Claude应用开发教程

更多教程&#xff0c;请访问claude应用开发教程 设置 运行以下设置单元以加载您的 API 密钥并建立 get_completion 辅助函数。 !pip install anthropic# Import pythons built-in regular expression library import re import anthropic# Retrieve the API_KEY & MODEL…...

【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit

1.问题描述&#xff1a; 人脸活体检测页面会有声音提示&#xff0c;如何控制声音开关&#xff1f; 解决方案&#xff1a; 活体检测暂无声音控制开关&#xff0c;但可通过其他能力控制系统音量&#xff0c;从而控制音量。 活体检测页面固定音频流设置的是8&#xff08;无障碍…...

【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题

问题复现 项目上历史项目为解决漏洞扫描从Tomcat 6.0升级到了9.0版本&#xff0c;服务启动的日志显示如下警告&#xff0c;数据源是通过JNDI方式在server.xml中配置的&#xff0c;控制台上狂刷无法找到表空间的错误&#xff08;没截图&#xff09; 报错&#xff1a; 06-Nov-…...

Git LFS

Git LFS&#xff08;Git Large File Storage&#xff09;是一个用于管理和版本控制大文件的工具&#xff0c;它扩展了 Git 的功能&#xff0c;帮助处理大文件或二进制文件的存储和管理问题。 为什么需要 Git LFS&#xff1f; Git 默认是针对文本文件进行优化的&#xff0c;尤…...

基于Redis缓存机制实现高并发接口调试

创建接口 这里使用的是阿里云提供的接口服务直接做的测试&#xff0c;接口地址 curl http://localhost:8080/initData?tokenAppWithRedis 这里主要通过参数cacheFirstfalse和true来区分是否走缓存&#xff0c;正常的业务机制可能是通过后台代码逻辑自行控制的&#xff0c;这…...

数字化转型实践:金蝶云星空与钉钉集成提升企业运营效率

数字化转型实践&#xff1a;金蝶云星空与钉钉集成提升企业运营效率 本文介绍了深圳一家电子设备制造企业在数字化转型过程中&#xff0c;如何通过金蝶云星空与钉钉的高效集成应对挑战、实施解决方案&#xff0c;并取得显著成果。集成项目在提高沟通效率、自动化审批流程和监控异…...

Flutter 鸿蒙next 中使用 MobX 进行状态管理

Flutter & 鸿蒙next 中使用 MobX 进行状态管理 在应用开发中&#xff0c;状态管理是一个至关重要的环节&#xff0c;特别是在复杂的Flutter或鸿蒙next项目中。状态的变化往往会影响UI的更新&#xff0c;因此&#xff0c;选择一种高效、灵活的状态管理工具显得尤为重要。Mo…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

虚幻基础:角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...