【react】useEffect 快速上手

news/2024/11/15 0:39:32/

useEffect 快速上手

useEffect(setup, dependencies?) 可以接收两个参数,分别是回调函数与依赖数组.
useEffect 用什么姿势来调用,本质上取决于你想用它来达成什么样的效果。下面我们来简单介绍 useEffect 的调用规则。

每一次渲染后都执行的副作用:传入回调函数,不传依赖数组。调用形式如下所示:

javascript">useEffect(setup);

仅在挂载阶段执行一次的副作用:传入回调函数,且这个函数的返回值不是一个函数,同时传入一个空数组。调用形式如下所示:

javascript">useEffect(()=>{// 这里是业务逻辑 
}, [])

仅在挂载阶段和卸载阶段执行的副作用:传入回调函数,且这个函数的返回值是一个函数,同时传入一个空数组。假如回调函数本身记为 A, 返回的函数记为 B,那么将在挂载阶段执行 A,卸载阶段执行 B。调用形式如下所示:

javascript">useEffect(()=>{// 这里是 A 的业务逻辑// 返回一个函数记为 Breturn ()=>{}
}, [])

注意,这种调用方式之所以会在卸载阶段去触发 B 函数的逻辑,是由 useEffect 的执行规则决定的:useEffect 回调中返回的函数被称为“清除函数”,当 React 识别到清除函数时,会在调用新的 effect 逻辑之前执行清除函数内部的逻辑。这个规律不会受第二个参数或者其他因素的影响,只要你在 useEffect 回调中返回了一个函数,它就会被作为清除函数来处理。

每一次渲染都触发,且卸载阶段也会被触发的副作用:传入回调函数,且这个函数的返回值是一个函数,同时不传第二个参数。如下所示:

javascript">useEffect(()=>{// 这里是 A 的业务逻辑// 返回一个函数记为 Breturn ()=>{}
})

上面这段代码就会使得 React 在每一次渲染都去触发 A 逻辑,并且在下一次 A 逻辑被触发之前去触发 B 逻辑。

如果有一段 effect 逻辑,需要在每次调用它之前对上一次的 effect 进行清理,那么把对应的清理逻辑写进 useEffect 回调的返回函数(上面示例中的 B 函数)里就行了。

根据一定的依赖条件来触发的副作用:传入回调函数,同时传入一个非空的数组,如下所示:

javascript">useEffect(()=>{// 这是回调函数的业务逻辑 // 若 xxx 是一个函数,则 xxx 会在组件每次因 num1、num2、num3 的改变而重新渲染时被触发return xxx
}, [num1, num2, num3])

这里一个示意数组是 [num1, num2, num3]。数组中的变量一般都是来源于组件本身的数据(props 或者 state)。若数组不为空,那么 React 就会在新的一次渲染后去对比前后两次的渲染,查看数组内是否有变量发生了更新(只要有一个数组元素变了,就会被认为更新发生了),并在有更新的前提下去触发 useEffect 中定义的副作用逻辑。


http://www.ppmy.cn/news/1467076.html

相关文章

PDF 转 word (优化版)

PDF 转 word (优化版) 原文链接:url,针对原文做了一些优化,适配性更好 首先在pdf所在文件夹中创建pdf2word.py import os from pdf2docx import Converterdef pdf_docx():# 获取当前路径file_path os.getcwd()# 获取…

HTML静态网页成品作业(HTML+CSS)——游戏阴阳师介绍网页(4个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有4个页面。 二、作品演示 三、代…

华为OD机试 - 贪心歌手 - 动态规划(Java 2024 D卷 200分)

华为OD机试 2024C卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(D卷C卷A卷B卷)》。 刷的越多,抽中的概率越大,每一题都有详细的答题思路、详细的代码注释、样例测…

【Java面试】十二、Kafka相关

文章目录 1、Kafka如何保证消息不丢失1.1 生产者发消息到Brocker丢失:设置异步发送1.2 消息在Broker存储时丢失:发送确认机制1.3 消费者从Brocker接收消息丢失1.4 同步 异步组合提交偏移量 2、Kafka如何保证消费的顺序性3、Kafka高可用机制3.1 集群模式…

家庭组网介绍

光纤是光信号,网线是电信号,光猫一个 很重要的特点就是做光电转换 光猫也可能有wifi功能,否则要买路由器 有了这些设备还不一定能上网,需要买运营商的带宽服务,还需要买公网ip的使用权 通过NAT技术上网(…

什么是人机协同翻译

什么是人机协同翻译 序什么是人机协同翻译账号绑定服务开通文档翻译图片翻译体验感受及建议 序 什么是人机协同翻译,为什么会需要人机协同翻译,以及人机协同翻译的效果,应用场景等,本文将关于这些内容一一解答。 什么是人机协同…

JVM学习笔记(持续更新)

JDK、JRE、JVM区别? 类加载过程 装载 验证 准备 解析 初始化 类加载器分类 双亲委派模型 如何打破双亲委派模型? 自定义类加载器,集成ClassLoader类重写loadClass,如Tomcat JVM内存模型 JVM 需要使用计算机的内存,Java 程序…

【机器学习基础】Python编程02:五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言,它在机器学习领域中的重要性主要体现在以下几个方面: 简洁易学:Python语法简洁清晰,易于学习,使得初学者能够快速上手机器学习项目。 丰富的库支持:Python拥有大量的机器学习库,如scikit-learn、TensorFlow、Keras和PyTorch等,这些…