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 文件,并允许用户通过…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献: stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下,文章也主…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
第八部分:阶段项目 6:构建 React 前端应用
现在,是时候将你学到的 React 基础知识付诸实践,构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段,你可以先使用模拟数据,或者如果你的后端 API(阶段项目 5)已经搭建好,可以直接连…...
