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

React 生命周期

news 来源：原创 2025/6/28 18:01:07

React 生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）

挂载（Mounting）

当组件实例被创建并插入到 DOM 中时，会依次调用以下方法：

`constructor(props)`

// 1.初始化组件的状态。
// 2.绑定事件处理器方法。
// 3.注意：不要在构造函数中调用 setState() 方法。
constructor(props) {super(props);this.state = {count: 0};
}

`static getDerivedStateFromProps(props, state)`

// 1.在组件渲染之前调用，返回一个对象来更新 state，或者返回 null 表示不更新任何内容。
// 2.注意：这个方法很少使用，因为它容易导致代码难以维护。
static getDerivedStateFromProps(props, state) {if (props.value !== state.externalValue) {return { externalValue: props.value };}return null;
}

`render()`

// 1.必须实现的方法，返回 React 元素、数组、片段、门户、字符串、数字或 null。
// 2.注意：不要在 render() 方法中调用 setState() 方法.
render() {return <h1>Hello, {this.state.name}</h1>;
}

componentDidMount()

// 1.在组件挂载后立即调用。
// 2.适合进行网络请求、订阅事件等操作。
// 3.注意：可以在这里调用 setState() 方法，但会导致额外的重新渲染。
componentDidMount() {fetch('/api/data').then(response => response.json()).then(data => this.setState({ data }));
}

更新（Updating）

当组件的 props 或 state 发生变化时，会依次调用以下方法：

static getDerivedStateFromProps(props, state)-在组件重新渲染之前调用，注意：与挂载阶段相同。

`shouldComponentUpdate(nextProps, nextState)`

// 1.返回一个布尔值，决定组件是否应该重新渲染。
// 2.默认返回 true，即组件会在每次更新时重新渲染。
// 3.注意：可以通过优化性能，避免不必要的重新渲染。
shouldComponentUpdate(nextProps, nextState) {return nextProps.value !== this.props.value || nextState.count !== this.state.count;
}

render()-与挂载阶段相同

`getSnapshotBeforeUpdate(prevProps, prevState)`

// 1.在最近一次渲染输出提交到 DOM 之前调用。
// 2.返回一个值，作为 componentDidUpdate 的第三个参数。
// 3.注意：很少使用，通常用于从 DOM 中捕获一些信息（如滚动位置）。
getSnapshotBeforeUpdate(prevProps, prevState) {if (prevProps.list.length < this.props.list.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;
}

`componentDidUpdate(prevProps, prevState, snapshot)`

// 1.在组件更新后立即调用。
// 2.可以在这里进行网络请求，但需要比较当前 props 和 prevProps。
// 3.注意：可以在这里调用 setState() 方法，但需要小心避免无限循环。
componentDidUpdate(prevProps, prevState, snapshot) {if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}
}

卸载（Unmounting）

当组件从 DOM 中移除时，会调用以下方法：

`componentWillUnmount()`

// 1. 在组件卸载和销毁之前调用。
// 2. 适合进行清理工作，如取消网络请求、清除定时器、取消事件订阅等。
// 3. 注意：不要调用 setState() 方法，因为组件即将被卸载。
componentWillUnmount() {clearInterval(this.timerID);
}

错误处理（Error Handling）

`static getDerivedStateFromError(error)`

// 1.在后代组件抛出错误后调用。
// 2.返回一个对象来更新 state。
// 3.注意：用于渲染备用 UI。
static getDerivedStateFromError(error) {return { hasError: true };
}

`componentDidCatch(error, info)`

// 1.在后代组件抛出错误后调用。
// 2.适合记录错误信息。
// 3.注意：可以在这里调用 setState() 方法。
componentDidCatch(error, info) {console.error("Error caught:", error, info);
}

`应用计算器`

// src/components/Counter.js
import React, { Component } from 'react';class Counter extends Component {constructor(props) {super(props);this.state = {count: 0};console.log('Constructor called');}static getDerivedStateFromProps(nextProps, prevState) {console.log('getDerivedStateFromProps called');return null; // 返回 null 表示不修改 state}componentDidMount() {console.log('componentDidMount called');}shouldComponentUpdate(nextProps, nextState) {console.log('shouldComponentUpdate called');return true; // 返回 true 表示允许更新}getSnapshotBeforeUpdate(prevProps, prevState) {console.log('getSnapshotBeforeUpdate called');return null; // 返回值将作为 componentDidUpdate 的第三个参数}componentDidUpdate(prevProps, prevState, snapshot) {console.log('componentDidUpdate called');}componentWillUnmount() {console.log('componentWillUnmount called');}incrementCount = () => {this.setState((prevState) => ({count: prevState.count + 1}));};render() {console.log('Render called');return (<div><h1>Count: {this.state.count}</h1><button onClick={this.incrementCount}>Increment</button></div>);}
}export default Counter;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter';ReactDOM.render(<Counter />, document.getElementById('root'));

总结

挂载（Mounting）：初始化组件、绑定事件、获取数据。
更新（Updating）：响应 props 和 state 的变化，优化性能。
卸载（Unmounting）：清理资源，避免内存泄漏。
错误处理（Error Handling）：捕获和处理错误，提供更好的用户体验。
挂载阶段：constructor -> getDerivedStateFromProps -> render -> componentDidMount
更新阶段：getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
卸载阶段：componentWillUnmount
useEffect：替代 componentDidMount、componentDidUpdate 和 componentWillUnmount。
useState：管理组件状态。
useMemo 和 useCallback：优化性能，避免不必要的重新渲染。

React 生命周期

React 生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting） 挂载（Mounting） 当组件实例被创建并插入到 DOM 中时，会依次调用以…...

编程日记 2025/6/28 18:01:07

OpenCV--图像查找

OpenCV--图像查找代码和笔记代码和笔记 import cv2 import numpy as np""" 图像查找--特征匹配的应用，通过特征匹配和单应性矩阵单应性变换：描述物体在世界坐标系（原图）和像素坐标系（对比图&#x…...

编程日记 2025/6/29 1:53:12

数据保护策略：如何保障重要信息的安全

一、什么是数据安全？ 数据安全是保护数字信息免遭盗窃、未经授权的访问和恶意修改的过程。这是一个持续的过程，负责监督信息的收集、存储和传输。机密性：保护数据免遭未授权方访问。完整性：保护数据免遭未经授权的修改、损坏…...

编程日记 2025/6/28 19:36:06

AI生成图表化：深入探索Mermaid

引言在使用生成式AI时，只要你提出让AI帮你生成mermaid图，AI的生成就会出现丰富的图形！ 在现代文档编写中，图表的使用不仅能增强文档的可读性，还能更直观地表达复杂的概念和流程。Mermaid 作为一款开源的图表绘制工具…...

编程日记 2025/6/28 17:54:15

模型训练中梯度累积步数（gradient_accumulation_steps）的作用

模型训练中梯度累积步数（gradient_accumulation_steps）的作用 flyfish 在使用训练大模型时，TrainingArguments有一个参数梯度累积步数（gradient_accumulation_steps） from transformers import TrainingArguments梯…...

编程日记 2025/6/28 18:00:58

jenkins安装（jdk1.8已安装）

1. 下载对应jenkins版本 https://mirrors.jenkins.io/war/ 2. 上传至服务器目录并启动 mkdir -p /root/jenkins cd /root/jenkins 上传文件启动：nohup java -jar jenkins.war --httpPort9090 &> jenkins.log & 访问：http://ip:9090 选…...

编程日记 2025/6/28 18:02:23

爬虫实战：获取1688接口数据全攻略

引言在电商领域，数据的重要性不言而喻。1688作为中国领先的B2B电商平台，提供了海量的商品数据。通过爬虫技术获取这些数据，可以帮助企业进行市场分析、价格监控和供应链管理。本文将详细介绍如何使用Python爬虫技术合法合规地获取1688接口数…...

编程日记 2025/6/28 19:49:13

基于Mybatis，MybatisPlus实现数据库查询分页功能

基于Mybatis，MybatisPlus实现数据库查询分页功能目录基于Mybatis，MybatisPlus实现数据库查询分页功能使用Mybatis插件实现分页数据库准备分页插件配置和使用常用数据： 使用MybatisPlus插件实现分页数据库准备分页插件配置和使用自定义分页查…...

编程日记 2025/6/28 18:00:49

【C++】求第二大的数详细解析

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述💯输入描述💯解题思路分析1. 题目核心要求2. 代码实现与解析3. 核心逻辑逐步解析定义并初始化变量遍历并处理输入数据更新最大值与次大值输…...

编程日记 2025/6/28 18:00:44

Ubuntu18安装后基本配置操作

1. 关掉自动更新不关掉自动更新，会将你的ubuntu系统更新到更高版本，一些配置就不能用了，所以要关掉自动更新。在“软件和更新”中将“自动检查更新”设置为从不。 2. ubuntu换国内源参考链接换源按照这个换源这个换源好使 ，…...

编程日记 2025/6/28 19:52:43

【Azure 架构师学习笔记】- Azure Function (1) --环境搭建和背景介绍

本文属于【Azure 架构师学习笔记】系列。本文属于【Azure Function 】系列。前言随着无服务计算的兴起和大数据环境中的数据集成需求， 需要使用某些轻量级的服务，来实现一些简单操作。因此Azure Function就成了微软云上的一个必不可少的组成部分。 …...

编程日记 2025/6/28 18:02:38

【ubuntu】将Chroma配置为LINUX服务

Chroma是一个轻量级向量数据库。既然是数据库，那么我希望它是能够长时间运行。最直接的方式是配置为service服务。可惜官方没有去提供配置为服务的办法，而鄙人对docker又不是特别感冒。所以自己研究了下chroma配置为服务的方式。系统：ubu…...

编程日记 2025/6/28 18:00:50

Linux24.04 安装企业微信

今天工作需要把windows系统换成了linux，但是公司的沟通工具是企业微信。去企业微信官网看了，没有linux版本，只能想办法解决了，不然再换回去就太坑了。方案 1、使用docker容器，2、使用deepin-wine 本人对docker不太熟…...

编程日记 2025/6/28 19:02:33

路由引入问题（双点双向路由回馈问题）

简介总所周知，路由引入import又称路由重分发redistribute，为了解决不同路由协议进程间路由信息不互通而使用的技术，由于不同路由协议的算法、机制、开销等因素的差异，它们之间无法直接交换路由信息。因此，路由引入技…...

编程日记 2025/6/28 18:45:15

Redis 实现分布式锁

单实例条件下的分布式锁 -- 加锁操作 -- KEYS[1]: 锁的键（lock_key） -- ARGV[1]: 当前客户端的标识（client_id） -- ARGV[2]: 锁的过期时间（毫秒）if (redis.call(EXISTS, KEYS[1]) 0) then-- 如果锁不存在…...

编程日记 2025/6/28 18:02:36

Redis客户端（Jedis、RedisTemplate、Redisson）

1. 简介 Redis作为一个当下很火热的非关系型数据库，Java从业人员基本都离不开对Redis的使用。在Java程序中该数据库，需要借助于市面上的开源客户端，如Jedis、Spring Data Redis、Redisson，它们可以作为操作Redis非关系型数据库的桥…...

编程日记 2025/6/28 18:00:51

虚幻引擎内各个组件的关系

1. GameMode: 关系: GameMode 是游戏规则的制定者和管理者，GameState 则是游戏状态的记录者和同步者。GameMode 通常负责创建和初始化 GameState。交互: GameMode 可以直接访问和修改 GameState 的属性，例如更新游戏分数、切换游戏阶段等。GameState 的变化会通过 GameMode …...

编程日记 2025/6/28 20:23:25

Python Flask Web框架快速入门

Flask 入门Demo Flask 开发环境搭建，执行如下指令： pip install flask# 第一节: Flask 快速入门from flask import Flask app Flask(__name__)app.route(/flask) def hello_flask():return Hello Flaskapp.run()核心代码剖析： 从flask包导…...

编程日记 2025/6/28 18:02:02

【java学习笔记】Set接口实现类-LinkedHashSet

一、LinkedHashSet的全面说明 （就是把数组不同位置的链表当成一个节点然后相连）...

编程日记 2025/6/28 18:00:52

阿里云ACP云计算模拟试题（附答案解析）

1、将基础设施作为服务的云计算服务类型是_____服务。 A.laas B.Paas C.SaaS D.Daas 答案：A 解析：基础设施即服务有时缩写为 IaaS，包含云 IT 的基本构建块，通常提供对联网功能、计算机（虚拟或专用硬件&#x…...

编程日记 2025/6/28 18:02:07

java 缓存篇2

缓存的部署方式单机主从哨兵集群特性主从（Master-Slave）哨兵（Sentinel）集群（Cluster）数据分片不支持不支持支持，基于 slot 进行水平分片高可用性部分支持（手动故障转移&#xff…...

编程日记 2025/6/28 19:38:27

12.11-12.12总结（约瑟夫问题机器翻译滑动窗口）

12.11 刷题《算法竞赛》这本书看了很多了，但是题目没咋做，所以今天来刷一下题 P1996约瑟夫问题还依稀记得大一的时候被约瑟夫支配的恐惧（哭），但是现在做就感觉很简单（虽然也敲了一会，今早感…...

编程日记 2025/6/28 5:50:58

Elasticsearch+Kibana+IK分词器+拼音分词器安装

目录 ES报错 Kibanaik分词器拼音分词器安装都比较简单，可以参考这几篇博客 ES 如何在 Linux，MacOS 及 Windows 上进行安装 Elasticsearch 报错 ES启动报错error downloading geoip database [GeoLite2-ASN.mmdb] Kibana KIBANA的安装教程&#xff…...

编程日记 2025/6/28 19:15:04

2020 年“泰迪杯”数据分析职业技能大赛A 题教育平台的线上课程智能推荐策略

2020 年“泰迪杯”数据分析职业技能大赛A 题教育平台的线上课程智能推荐策略完整代码请私聊博主一、背景近年来，随着互联网与通信技术的高速发展，学习资源的建设与共享呈现出新的发展趋势，各种网课、慕课、直播课等层出不穷&#xff0c…...

编程日记 2025/6/28 18:52:17

运维面试题

1 deployment和statefulset区别 Kubernetes (k8s) 中的 Deployment 和 StatefulSet 是两种不同类型的控制器，用于管理应用的生命周期，但它们适用于不同的应用场景。以下是它们在存储、调度顺序和网络分配方面的区别： 存储 Deployment: 适用…...

编程日记 2025/6/28 14:22:09

计算机网络之网络层超详细讲解

个人主页：C忠实粉丝欢迎点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝原创计算机网络之网络层超详细讲解收录于专栏【计算机网络】本专栏旨在分享学习计算机网络的一点学习笔记，欢迎大家在评论区交流讨论💌 …...

编程日记 2025/6/28 18:02:00

Windows桌面系统管理2：VMware Workstation使用和管理

Windows桌面系统管理0：总目录-CSDN博客 Windows桌面系统管理1：计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2：VMware Workstation使用和管理 Windows桌面系统管理3：Windows 10操作系统部署与使用-CSDN博客 Windows桌面系统管理4：Windows 10操作系统运维管理-…...

编程日记 2025/6/28 19:06:07

深入理解 CSS 文本换行： overflow-wrap 和 word-break

前言正常情况下，在固定宽度的盒子中的中文会自动换行。但是，当遇到非常长的英文单词或者很长的 URL 时，文本可能就不会自动换行，而会溢出所在容器。幸运的是，CSS 为我们提供了一些和文本换行相关的属性；今…...

编程日记 2025/6/28 18:00:55

【Linux】Ubuntu：安装系统后配置

hostname：更改主机名打开终端。使用hostnamectl命令更改主机名。 sudo hostnamectl set-hostname 新的主机名你可以使用hostnamectl 命令来验证更改是否成功： hostnamectlChrome：更换默认浏览器以下是从 Ubuntu 中移除预装的 Snap 版 Fi…...

编程日记 2025/6/28 18:02:03

我们来学mysql -- MSI安装（安装篇）

主题书接上文，在《探讨win安装方式》中官方推荐MSI要是把大厂的标准奉为圭臬，说啥认啥，他一翻脸，小丑不就是咱了再说了，都干到家门口了8.4版本官方文档，还不给他梭罗下 MSI 点击**.msi弹出MySQL Install…...

编程日记 2025/6/28 18:00:54

MySQL其一，概念学习，可视化软件安装以及增删改查语句

目录 MySQL 1、数据库的概念 2、数据库分类 3、MySQL的安装 4、安装过程中的问题 DataGrip的使用： SQLynx的使用： 5、编写SQL语句 6、DDL语句 7、DML 新增数据： 删除数据： 修改数据： MySQL SQL其实是一门…...

编程日记 2025/6/27 21:06:27

SpringCloud 题库

这篇文章是关于 SpringCloud 面试题的汇总，包括微服务的概念、SpringCloud 的组成及相关技术，如服务注册与发现、负载均衡、容错等，还涉及 Nacos 配置中心、服务注册表结构等原理，以及微服务架构中的日志采集、服务网关、相关概念…...

编程日记 2025/6/28 19:51:13

【ETCD】[源码阅读]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法

在分布式系统中，etcd 的一致性与高效性得益于其强大的 Raft 协议模块。而 processInternalRaftRequestOnce 是 etcd 服务器处理内部 Raft 请求的核心方法之一。本文将从源码角度解析这个方法的逻辑流程，帮助读者更好地理解 etcd 的内部实现。方法源码 …...

编程日记 2025/6/28 18:49:18

数据分析与机器学习全解析

一、数据分析基础要点 （一）数据收集确定数据源：明确是内部数据库、外部公开数据、传感器采集还是用户调研等来源，不同来源数据质量与获取难度各异。例如内部销售数据可直接获取，而市场调研数据需设计问卷并投入人力收…...

编程日记 2025/6/28 19:25:52

Qt 一个简单的QChart 绘图

Qt 一个简单的QChart 绘图先上程序运行结果图： “sample9_1QChart.h” 文件代码如下： #pragma once#include <QtWidgets/QMainWindow> #include "ui_sample9_1QChart.h"#include <QtCharts> //必须这么设置 QT_CHARTS_USE_NAME…...

编程日记 2025/6/28 18:02:01

力扣——322. 零钱兑换

给你一个整数数组 coins ，表示不同面额的硬币；以及一个整数 amount ，表示总金额。计算并返回可以凑成总金额所需的最少的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1 。你可以认为每种硬币的数量是无限的。示…...

编程日记 2025/6/28 18:02:11

Qt之网络监测

在Qt中，网络监测通常涉及到检测网络连接状态、网络延迟、带宽使用情况等。Qt提供了一些类和模块来帮助开发者实现这些功能。以下是一些常用的方法和类： 1. 检测网络连接状态 QtNetwork模块中的QNetworkConfigurationManager类可以用来检测设备的网络连…...

编程日记 2025/6/28 20:26:44

fiddler官方文档 Fiddler 抓包教程1 Fiddler 抓包教程2 wireshark抓包学习 2添加链接描述 ip 过滤 ip.src_host ip.dst_host ip.addr mac 过滤 eth.src eth.dst eth.addr 端口过滤 tcp.port tcp.srcport tcp.dstport 协议类型过滤 arp dhcp 规则组合 and or...

编程日记 2025/6/28 18:02:44

【从零开始入门unity游戏开发之——C#篇03】变量和常量

文章目录一、变量1、什么是变量？2、申明变量的固定写法3、变量的类型值和引用类型的区别无符号和有符号位——表示变量所占用的内存空间的大小范围——表示变量的取值范围取值范围和存储单位的关系为什么byte的范围是 0 到 255？为什么 sbyte 的范围是 -…...

编程日记 2025/6/28 18:03:38

SpringBoot 手动实现动态切换数据源 DynamicSource （上）

大家好，我是此林。在实际开发中，经常可能遇到在一个SpringBoot Web应用中需要访问多个数据源的情况。下面来介绍一下多数据源的使用场景、底层原理和手动实现。一、多数据源经典使用场景场景一：业务复杂，数据量过大 1. 业务…...

编程日记 2025/6/28 20:24:35

ERROR Error: command failed: yarnError: command failed: yarn

1、异常信息 2、解决解决方法一： WinR进入命令行，重新安装npm(如果报镜像源问题建议镜像源也重新配置) 输入命令，重新安装npm/yarn #npm npm install#npm 配置镜像源 npm config set registry https://registry.npmmirror.com#npm 查看镜…...

编程日记 2025/6/28 18:28:29

【java】finalize方法

目录 1. 说明2. 调用过程3. 注意事项 1. 说明 1.finalize方法是Java中Object类的一个方法。2.finalize方法用于在对象被垃圾回收之前执行一些清理工作。3.当JVM（Java虚拟机）确定一个对象不再被引用、即将被回收时，会调用该对象的finalize方法…...

编程日记 2025/6/28 1:12:26

C++ 内存管理和模板与STL

此篇目是之后各种C库的基础目录内存管理内存分布内存管理方式 new和delete operator new 与 operator delete函数实现原理定位new表达式(placement-new) 模板基础泛型编程模板函数模板类模板 STL 组成部分内存管理内存分布 int globalVar 1; //全局变量静…...

编程日记 2025/6/28 21:29:47

同一个局域网下的两台电脑实现定时或者实时拷贝数据

【亲测能用】需求：从数据库服务器上将数据库备份文件*.bak，每天定时拷贝到局域网下另一台电脑上，实现异机备份。本文中192.168.1.110是本机，192.168.1.130是异机（备份机）。需求是每天定时从192.168.1.1…...

编程日记 2025/6/28 19:07:45

Python毕业设计选题：基于django+vue的汽车租赁管理网站

开发语言：Python框架：djangoPython版本：python3.7.7数据库：mysql 5.7数据库工具：Navicat11开发软件：PyCharm 系统展示用户管理汽车品牌管理汽车信息管理汽车租赁管理汽车商品信息管理汽车租赁购物…...

编程日记 2025/6/28 18:26:50

scrapy对接rabbitmq的时候使用post请求

之前做分布式爬虫的时候,都是从push url来拿到爬虫消费的链接,这里提出一个问题,假如这个请求是post请求的呢,我观察了scrapy-redis的源码,其中spider.py的代码是这样写的 1.scrapy-redis源码分析 def make_request_from_data(self, data):"""Returns a Reques…...

编程日记 2025/6/28 9:14:16