react18【系列实用教程】useEffect —— 副作用操作 (2024最新版)
什么是副作用操作?
useEffect 用于编写由渲染本身引起的对接组件外部的操作(官方称呼为:副作用操作)
以下情况会触发页面渲染
- 初次加载页面(组的挂载)
- 响应式变量发生变化,触发页面根据新值重新渲染(组件更新)
- 关闭页面(组件卸载)
以下情况需要添加副作用操作
- 页面初步渲染完成后,向服务器获取数据完成页面的最终渲染
- 响应式变量发生变化时,先根据新值执行必要的其他业务逻辑,再进行最终的页面更新渲染
- 关闭页面时,关闭定时器
useEffect 语法
useEffect 是 hook 函数
- 第一个参数(必要): 自定义的处理函数(官方称呼为:副作用函数)
- 第二个参数(可选): 依赖项

无依赖项
执行副作用函数的时机
- 组件初次渲染后(组件挂载完成),在开发环境,会执行两次,生产环境仅执行一次
- 组件更新渲染前(任一响应式变量变化都会触发!)
import { useEffect } from "react";function Demo() {useEffect(() => {console.log("执行了副作用函数");});return (<><div>你好</div></>);
}export default Demo;
依赖项为空数组 []
类似 vue 的生命周期 mounted
执行副作用函数的时机
- 组件初次渲染后(组件挂载完成),在开发环境,会执行两次,生产环境仅执行一次
import { useEffect } from "react";function Demo() {useEffect(() => {console.log("执行了副作用函数");}, []);return (<><div>你好</div></>);
}export default Demo;
使用场景
初次渲染页面时访问接口加载页面数据
import { useEffect, useState } from "react";
import axios from "axios";function Demo() {const [list, setList] = useState([]);useEffect(() => {async function getList() {const res = await axios.get("http://localhost:3000/dataList");setList(res.data);}getList();}, []);return (<>{list.map((item) => (<div key={item.id}>{item.title}</div>))}</>);
}export default Demo;
依赖项为响应式变量构成的数组
类似 vue 的立即执行侦听器 watch
执行副作用函数的时机
- 组件初次渲染后(组件挂载完成),在开发环境,会执行两次,生产环境仅执行一次
- 响应式变量发生变化触发页面进行更新渲染前
import { useEffect, useState } from "react";function Demo() {const [name, setName] = useState("朝阳");useEffect(() => {// 在挂载和 name 更新时,都会执行!console.log("当前name值为:", name);}, [name]);function changeName() {setName("晚霞");}return (<><button onClick={changeName}>改名字</button></>);
}export default Demo;
清除副作用
最经典的场景即在组件卸载时清除计时器,以免内存泄露
father.jsx
import { useState } from "react";
import Child from "./child.jsx";function Father() {const [ifChild, setIfChild] = useState(true);function removeChild() {setIfChild(false);}return (<><button onClick={removeChild}>移除子组件</button>{ifChild && <Child />}</>);
}export default Father;
child.jsx
import { useEffect } from "react";function Child() {useEffect(() => {// 添加定时器const timer = setInterval(() => {console.log("执行了定时器");}, 1000);return () => {// 清除定时器clearInterval(timer);};});return (<><div><h1>我是子组件</h1></div></>);
}export default Child;
相关文章:
react18【系列实用教程】useEffect —— 副作用操作 (2024最新版)
什么是副作用操作? useEffect 用于编写由渲染本身引起的对接组件外部的操作(官方称呼为:副作用操作) 以下情况会触发页面渲染 初次加载页面(组的挂载)响应式变量发生变化,触发页面根据新值重新…...
Excel 分组汇总后删除明细
有 Excel 数据如下所示: IDCriteria1Criteria2Criteria3Criteria4101210271239312381236123171826182918239182120182147 需要按 ID 分组汇总其余列,结果如下: IDCriteria1Criteria2Criteria3Criteria410121027123932561826939267 解法及简…...
docker runc升级1.1.12
上传runc-1.1.12制品至中控机 874e970eaa932a97de9888344ae08f24 runc.arm64 将所有节点的runc文件备份 所有节点(包括master+node) vim host [all] 10.1.0.183 ansible_password=Bigdata@Ksyun123 ansible_user=root ansible_port=22 10.1.0.249 ansible_password=Bigdata…...
C++接口:构建模块化与可扩展的软件架构
目录标题 1. 接口的定义与作用2. 抽象类作为接口3. 接口的设计原则4. 示例:使用接口实现多态5. 拓展:接口和类的区别6. 结论 在C编程中,接口是一种重要的设计模式,它定义了一组方法,这些方法可以被不同的类实现。接口在…...
【讲解下目标追踪】
🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…...
实时Linux对EtherCAT工业自动化协议的支持
在自动化技术和工业控制领域,实时通信网络的重要性不断增长。EtherCAT(Ethernet for Control Automation Technology)作为一种高效的工业以太网通信协议,因其出色的性能和灵活性而广受欢迎。而实时Linux作为影响最为广泛的开源实时…...
ViLT 浅析
ViLT 浅析 论文链接:ViLT 文章目录 ViLT 浅析创新点网络结构总结 创新点 本文先分析了4种不同类型的Vision-and-Language Pretraining(VLP) 其中每个矩形的高表示相对计算量大小,VE、TE和MI分别是visual embedding、text embedding和modality interact…...
7-117 死亡隧道
小毛驴要回家了,凭借着刚从老毛驴处学到的闪烁魔法,小毛驴信心满满地出发了。这一次它来到了另一条死亡隧道口,但是,小毛驴不知道死亡威胁随时存在,因为它所打算穿过的这条死亡隧道即将于T秒时间后坍塌。 已知小毛驴行走的速度是每秒17米,而小毛驴拥有的闪烁法术可以使它…...
java数据结构与算法(链表归并排序)
前言 链表的归并排序和数组的归并排序类似,只是在操作原有操作数组的基础上对链表进行操作。喜欢的可以试试吧。 实现原理 链表归并排序是一种常见的排序算法,它利用了归并排序的思想来对链表进行排序。与数组不同,链表在归并排序中的主要…...
最新网页版USB转串口芯片CH340中文规格书手册(20240511)
前言 南京沁恒的产品已经很成熟了,完全可替代国外USB转串口产品,不必迷信FT232,CP2102之类了。 另外,急着买芯片,直接跑过去的,看过几次妹子了:) CH340手册,基于网页3.3版本,规格书…...
关于 MongoDB 数据库基本操作的详细介绍
MongoDB 是一个基于分布式文件存储的数据库,其设计旨在提供高性能、可扩展性和易用性。以下是关于 MongoDB 数据库基本操作的详细介绍 一、MongoDB 简介 MongoDB 是一个面向文档的数据库,其数据存储在类似 JSON 的 BSON(Binary JSON&#x…...
【网络基础】网络层 之 IP协议与分片、网段划分、IP地址分类、子网掩码与路由
文章目录 网络层1. IP协议段格式1.1 分片1.2 *为什么存在分片 / 分片是什么 ?*1.3 *如何理解 / 实现 分片与组装*1.4 深入具体:分片 和 组装 的过程1.5 为什么不推荐 分片 2. 网段划分2.1 举例:国际间通信 && 国家内通信2.2 理解网段划分 3. IP…...
C语言实现猜数字小游戏
1.随机数生成 要想实现猜数字小游戏,依赖于随机数的生成 1.1 rand()函数 这个函数是用来生成随机数的,返回值是正整数,他的值的范围是0到rand_max之间的,rand_max的值在大多数编译器上面是32767,rand()函数的使用必…...
iOS Failed to create provisioning profile.
错误描述 错误情况参考这张图 解决方案 修改Bundle Identifier就可以解决这个错误,找不到位置可以看图 (具体解决的原理与证书有关,个人不是非常熟悉,还望大神告知)...
122. Kafka问题与解决实践
文章目录 前言顺序问题1. 为什么要保证消息的顺序?2.如何保证消息顺序?3.出现意外4.解决过程 消息积压1. 消息体过大2. 路由规则不合理3. 批量操作引起的连锁反应4. 表过大 主键冲突数据库主从延迟重复消费多环境消费问题后记 前言 假如有家公司是做餐饮…...
Pytorch常用的函数(九)torch.gather()用法
Pytorch常用的函数(九)torch.gather()用法 torch.gather() 就是在指定维度上收集value。 torch.gather() 的必填也是最常用的参数有三个,下面引用官方解释: input (Tensor) – the source tensordim (int) – the axis along which to indexindex (Lo…...
用爬虫解决问题
使用Java进行网络爬虫开发是一种常见的做法,它可以帮助你从网站上自动抓取信息。Java语言因为其丰富的库支持(如Jsoup、HtmlUnit、Selenium等)和良好的跨平台性,成为实现爬虫的优选语言之一。下面我将简要介绍如何使用Java编写一个…...
机器学习-有监督学习
有监督学习是机器学习的一种主要范式,其基本思想是从有标签的训练数据中学习输入和输出之间的关系,然后利用学习到的模型对新的输入进行预测或分类。 有监督学习的过程如下: 1. 准备数据:首先,需要准备一组有标签的训练…...
【详细介绍下Visual Studio】
🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…...
【Golang】实现 Excel 文件下载功能
在当今的网络应用开发中,提供数据导出功能是一项常见的需求。Excel 作为一种广泛使用的电子表格格式,通常是数据导出的首选格式之一。在本教程中,我们将学习如何使用 Go 语言和 Gin Web 框架来创建一个 Excel 文件,并允许用户通过…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...
深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙
WebGL:在浏览器中解锁3D世界的魔法钥匙 引言:网页的边界正在消失 在数字化浪潮的推动下,网页早已不再是静态信息的展示窗口。如今,我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室,甚至沉浸式的V…...
字符串哈希+KMP
P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...
13.10 LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析
LangGraph多轮对话系统实战:Ollama私有部署+情感识别优化全解析 LanguageMentor 对话式训练系统架构与实现 关键词:多轮对话系统设计、场景化提示工程、情感识别优化、LangGraph 状态管理、Ollama 私有化部署 1. 对话训练系统技术架构 采用四层架构实现高扩展性的对话训练…...
