React 生命周期详解

news/2024/6/17 5:26:57 标签: react.js

React 组件的生命周期是组件在创建、更新和销毁过程中所经历的一系列阶段。每个阶段都会触发特定的生命周期方法,开发者可以在这些方法中执行特定的操作。React 的生命周期方法可以分为三个阶段:挂载阶段、更新阶段和卸载阶段。

1. 挂载阶段

在组件首次被创建并插入到 DOM 中的过程中,会依次调用以下生命周期方法:

  • constructor(props): 构造函数,最先被执行,在这里设置组件的初始状态以及绑定事件处理函数。
  • static getDerivedStateFromProps(props, state): 这是一个静态方法,用于在接收新的 props 时同步 state 状态。它返回一个对象用于更新 state,或者返回 null 表示不更新任何内容。
  • render(): 这个方法负责渲染组件并返回需要显示的内容。
  • componentDidMount(): 组件被挂载到 DOM 上后,该方法立即被调用。通常在这里进行网络请求、订阅事件等操作。

2. 更新阶段

当组件的 props 发生变化或组件内部状态发生变化时,会触发更新阶段,涉及以下生命周期方法:

  • static getDerivedStateFromProps(props, state): 与挂载阶段相同,用于在接收新的 props 时同步 state 状态。
  • shouldComponentUpdate(nextProps, nextState): 这个方法返回一个布尔值,用于判断是否需要继续执行后面的渲染流程。根据 props 和 state 的变化,可以实现性能优化。
  • render(): 重新渲染组件。
  • getSnapshotBeforeUpdate(prevProps, prevState): 在 DOM 更新之前被调用,用于捕获 DOM 更新前的某些信息(如滚动位置)。返回的值会传递给 componentDidUpdate
  • componentDidUpdate(prevProps, prevState, snapshot): 在 DOM 更新完成后被调用。可以在这里执行依赖于 DOM 更新的操作,如获取更新后的 DOM 元素尺寸。

3. 卸载阶段

当组件从 DOM 中移除时,会触发卸载阶段,涉及以下生命周期方法:

  • componentWillUnmount(): 在组件卸载及销毁之前被调用。通常在这里执行清理操作,如取消网络请求、移除事件监听等。

需要注意的是,React 16.3 版本引入了新的生命周期方法,并将一些过时的方法(如 componentWillMountcomponentWillReceiveProps 和 componentWillUpdate)标记为不安全。在新的类组件中,建议使用新的生命周期方法,或者使用函数组件与 Hooks 替代类组件。


http://www.niftyadmin.cn/n/5350274.html

相关文章

常用的gpt-4 prompt words收集6

本文介绍我最近收集的一些好用的chatgpt-4的prompts,如果你也有好用的提示词可以互相交流一下。 1. “make it more vivid and lifelike” or “make it more vibrant and realistic.” 将它变得更加生动形象 2. Cross-Site Request Forgery (CSRF) 跨站请求伪造…

人工智能:更多有用的 Python 库

目录 前言 推荐 JupyterLab 入门 复杂的矩阵运算 其它人工智能和机器学习的 Python 库 前言 在这篇文章中,我们将了解更多的矩阵操作,同时再介绍几个人工智能 Python 库。 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂&#x…

师傅带练|大数据人工智能在线实习项目特色

大数据人工智能八大在线实习项目: 某实习网站招聘信息采集与分析 股票价格形态聚类与收益分析 某平台网络入侵用户自动识别 某平台广东省区采购数据分析 产品订单的数据分析与需求预测 基于注意力机制的评论者满意度分析 基于锅炉工况实现…

《Python 简易速速上手小册》第10章:Python 项目实战(基于最新版 Python3.12 编写)

注意&#xff1a;本《Python 简易速速上手小册》 核心目的在于让零基础新手「快速构建 Python 知识体系」 文章目录 <mark >注意&#xff1a;本《Python 简易速速上手小册》<mark >核心目的在于让零基础新手「快速构建 Python 知识体系」 10.1 项目规划和结构10.1…

Qt扩展-QXlsx读写Excel配置使用

QXlsx读写Excel配置使用 一、概述1. 功能概述2. 其他维护 二、安装1. 下载源码2. 配置项目3. 测试代码4. 运行结果 一、概述 项目介绍&#xff1a;https://qtexcel.github.io/QXlsx/Example.html GitHub&#xff1a;https://github.com/QtExcel/QXlsx/tree/master QXlsx 是一个…

java中如何使用Lambda表达式(二)

Lambda表达式用于实现哪些功能 Lambda表达式是Java 8中引入的一种新特性&#xff0c;它允许开发者以更加简洁的方式编写函数式代码。这种表达式实质上是一个匿名函数&#xff0c;即没有函数名的函数&#xff0c;可以把Lambda表达式理解为一段可以传递的代码&#xff08;将代码…

Chrome单独配置代理的方法

Windows Windows上单独对Chrome设置代理&#xff0c;需要在启动时传递参数&#xff0c;具体步骤如下。 在Chrome浏览器的快捷方式上右击&#xff0c;进入属性。在 快捷方式 标签下找到 目标 项目&#xff0c;在最后添加 –proxy-server“socks5://xxx.xxx.xx.xx:xxxx” 如果要…

4核16G幻兽帕鲁服务器性能测评,多少钱?

腾讯云幻兽帕鲁服务器4核16G14M配置&#xff0c;14M公网带宽&#xff0c;限制2500GB月流量&#xff0c;系统盘为220GB SSD盘&#xff0c;优惠价格66元1个月&#xff0c;277元3个月&#xff0c;支持4到8个玩家畅玩&#xff0c;地域可选择上海/北京/成都/南京/广州&#xff0c;腾…