【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

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

自定义springCloudLoadbalancer简述

概述 目前后端用的基本都是springCloud体系&#xff1b; 平时在dev环境开发时&#xff0c;会把自己的本地服务也注册上去&#xff0c;但是这样的话&#xff0c;在客户端调用时请求可能会打到自己本地&#xff0c;对客户端测试不太友好. 思路大致就是前端在请求头传入指定ip&a…

Vue3-子传父

1. 主组件 App.vue&#xff08;父组件&#xff09; 在 App.vue 中&#xff0c;我们先引入了子组件 SonCom&#xff0c;这个小家伙将在父组件中出场。 接着&#xff0c;我们写了一个叫 getMessage 的函数。这个函数的任务很简单——接收子组件传来的消息&#xff0c;然后用 con…

vue--vueCLI

何为CLI ■ CLI是Command-Line Interface,俗称脚手架. ■ 使用Vue.js开发大型应用时&#xff0c;我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。&#xff08;vue 脚手架的作用&#xff09;&#xff0c; 而通过vue-cli即可&#xff1a;vue-cli 可以…

基于 JAVASSM(Java + Spring + Spring MVC + MyBatis)框架开发一个医院挂号系统

基于 JAVASSM&#xff08;Java Spring Spring MVC MyBatis&#xff09;框架开发一个医院挂号系统是一个实用的项目。 步骤一&#xff1a;需求分析 明确系统需要实现的功能&#xff0c;比如&#xff1a; 用户注册和登录查看医生列表预约挂号查看预约记录取消预约管理员管…

Golang--反射

1、概念 反射可以做什么? 反射可以在运行时动态获取变量的各种信息&#xff0c;比如变量的类型&#xff0c;类别等信息如果是结构体变量&#xff0c;还可以获取到结构体本身的信息(包括结构体的字段、方法)通过反射&#xff0c;可以修改变量的值&#xff0c;可以调用关联的方法…

计算机网络 TCP/IP体系 数据链路层

一. 数据链路层的基本概念 数据链路层主要负责节点之间的通信&#xff0c;确保从物理层接收到的数据能够准确无误地传输到网络层。 数据链路层使用的信道主要有以下两种类型: 点对点信道: 这种信道使用一对一的点对点通信方式。广播信道: 这种信道使用一对多的广播通信方式,…

使用注解装配Bean

&#xff01;&#xff01;&#xff01;仅用作学习笔记记录&#xff01;&#xff01;&#xff01; 一、一些概念&#xff1a; 1.定义Bean的注解&#xff1a; 在实际开发中分别使用Repository、Service与Controller对实现类进行标注。 2.注入Bean组件装配的注解 Autowired默认…

csa文件管理账号管理练习

1、查看/etc/passwd文件的第18-20行内容&#xff0c;并将找到的内容存储至/home/passwd文件中&#xff08;head&#xff0c;tail&#xff0c;>,>>&#xff09; # head -num 显示文件头num行 # tail -num &#xff1a;显示文件的最后num行 # 输出重定向 > # 使用…

软考高级架构 - 8.1 - 系统质量属性与架构评估 - 超详细讲解+精简总结

第8章 系统质量属性与架构评估 软件系统属性包括功能属性和质量属性&#xff0c;而软件架构重点关注质量属性。 8.1 软件系统质量属性 8.1.1 概述 软件系统的质量反映了其与需求的一致性&#xff0c;即&#xff1a;软件系统的质量高低取决于它是否能满足用户提出的需求&#…

初见Linux:基础开发工具

前言&#xff1a; 这篇文章我们将讲述Linux的基本开发工具&#xff0c;以及讨论Linux的生态圈&#xff0c;最后再了解vim开发工具。 Yum&#xff1a; YUM&#xff08;Yellowdog Updater Modified&#xff09;是一个在Linux系统中用于管理软件包的工具&#xff0c;特别是在基于…

电信基站智能计量新方案:DJSF1352双通讯直流计量电表——安科瑞 丁佳雯

随着信息技术的飞速发展和5G时代的到来&#xff0c;电信基站作为信息传输的重要基础设施&#xff0c;其能耗管理和运营效率成为各大运营商关注的焦点。为了应对日益增长的能耗需求和复杂的运维挑战&#xff0c;采用高效、智能的计量方案显得尤为重要。在这样的背景下&#xff0…

Pytorch cuda版本选择(高效简洁版)

简而言之 Pytorch cuda版本选择 只需要低于cuda驱动版本即可&#xff0c;cuda驱动版本查看命令是nvidia-smi, nvcc -V 是runtimeapi版本可以不用管 1.只要看cuda驱动版本 安装pytorch 选择cuda版本&#xff0c;只要看你电脑cuda驱动版本即可。 2.选择依据 pytorch中cuda版本只…

全网最详细的项目管理完整方案!破解项目管理难题,解决方案一网打尽!

在现代企业中&#xff0c;项目管理愈发复杂&#xff0c;尤其是项目规模扩大、团队多元化的情况下&#xff0c;项目管理的难度逐渐上升。当前&#xff0c;企业在项目管理中面临以下主要问题&#xff1a; 信息碎片化&#xff1a;项目数据和文件分散在不同部门和系统中&#xff0…

数据库的使用05:不规范的写法与操作记录

一、写SQL带数据库名 【严禁】sql写成 select * from databasename.dbo.tablename 【原因】生产环境的databsename不一定和开发环境的databsename一样 【正确写法】select * from tablename 二、不合理的表设计 【改善方法】C#小结&#xff1a;数据库中数据表的设计原则、技…

YOLO11改进 | 融合改进 | C3k2引入多尺度分支来增强特征表征【全网独家 附结构图】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 本文给大家带来的教程是将YOLO11的C3k2替…

三维测量与建模笔记 - 3.1 相机标定基本概念

成像领域有多个标定概念 笔记所说的相机标定主要是指几何标定。 相机几何模型基于小孔成像原理&#xff0c;相关文章很多&#xff0c;上图中R t矩阵是外参矩阵&#xff08;和相机在世界空间中的位姿相关&#xff09;&#xff0c;K矩阵是内参矩阵&#xff08;和相机本身参数相关…

安卓/华为手机恢复出厂设置后如何恢复照片

绝大多数安卓用户都会经历过手机恢复出厂设置&#xff0c;部分用户可能没有意识到手机恢复出厂设置可能会导致数据丢失。但是&#xff0c;当您在 云盘上进行备份或在设备上进行本地备份时&#xff0c;情况就会有所不同&#xff0c;并且当您将 安卓手机恢复出厂设置时&#xff0…

丹摩征文活动 |【AI落地应用实战】文本生成语音Parler-TTS + DAMODEL复现指南

目录 一、Parler-TTS简介1.1、TTS 模型1.2、Parler-TTS 二、Parler-TTS复现流程2.1、创建实例2.2、配置代码与环境2.3、配置预训练模型2.4、Parles-TTS使用 Parler-TTS 是一个由 Hugging Face 开源的文本生成语音 (Text-to-Speech, TTS) 模型。它的设计目的是生成高质量的语音输…

【QT项目】QT6项目之基于C++的通讯录管理系统(联系人/学生管理系统)

目录 一.项目背景 二.创建工程 工程创建 添加文件 联系人类 功能类 三.功能实现 联系人类 person.cpp person.h 查 查询按钮槽函数 返回按钮槽函数 findperson.cpp: 增 addperson.cpp: 删 deleteperson.cpp&#xff1a; 改 changeperson.cpp&#xff1a…

一文详谈领域驱动设计实践

作者&#xff1a;泊静 阿里云开发者 导读 本文作者结合在团队的实践过程&#xff0c;分享了自己对领域驱动设计的一些思考。 了解过领域驱动设计的同学都知道&#xff0c;人们常常把领域驱动设计分为两部分&#xff1a;战术设计和战略设计。这两个概念本身都是抽象的&#xff…