【react】useEffect 快速上手

ops/2024/10/18 23:24:48/

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/ops/47292.html

相关文章

Docker部署MYSQL8.0发现启动了却无法连接,Navicat连接后项目正常连接的解决方案

Docker部署MYSQL8.0发现启动了却无法连接,使用Navicat连接后项目正常连接 客户端不支持caching_sha2_password的加密方式 可进入容器处理或使用navicat连接后修改 # 进入mysql容器内容 docker exec -it mysql bash # 进入输入下面命令 ,然后输入密码 mysql -u roo…

第一个SpringBoot项目

目录 💭1、新建New Project IDEA2023版本创建Sping项目只能勾选17和21,却无法使用Java8?🌟 2、下载JDK 17🌟 💭2、项目创建成功界面 1、目录 🌟 2、pom文件🌟 💭3、…

MySQL之查询性能优化(四)

查询性能优化 MySQL客户端/服务器通信协议 一般来说,不需要去理解MySQL通信协议的内部实现细节,只需要大致理解通信协议是如何工作的。MySQL客户端和服务器之间的通信协议是"半双工"的,这意味着,在任何一个时刻&#…

MySQL经典练习50题(上)(解析版)

所有笔记、生活分享首发于个人博客 想要获得最佳的阅读体验(无广告且清爽),请访问本篇笔记 MySQL经典练习50题(上) 创建数据库和表 -- 建 表 -- 学 生 表 CREATE TABLE Student( s_id VARCHAR(20), s_name VARCHAR(2…

Flutter 中的 InheritedTheme 小部件:全面指南

Flutter 中的 InheritedTheme 小部件:全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架,它允许开发者使用 Dart 语言构建高性能、美观的移动、Web 和桌面应用。在 Flutter 的丰富组件库中,InheritedTheme 是一个特殊的组件&#xff0…

WPF 依赖属性原理、 附加属性

依赖属性如何节约内存 MSDN中给出了下面几种应用依赖属性的场景: 希望可在样式中设置属性。 希望属性支持数据绑定。 希望可使用动态资源引用设置属性。 希望从元素树中的父元素自动继承属性值。 希望属性可进行动画处理。 希望属性系统在属性系统、环境或用户…

病人预约的分析

需求确定: 系统提供病人分别通过电话,email等电话预约与网上直接预约两种方式进行预约。通过值班护士或者office Manager来管理预约,具体预约业务流程见Patient Appointment .vsd流程图。 系统通过病人直接预约,方便了patient就诊…

AI-WEB-1 vulnhub靶场

AI-WEB-1 端口扫描 仅开放80端口 访问80端口 啥也没有 目录扫描 查看robots.txt 发现两个新目录 Disallow: /m3diNf0/ Disallow: /se3reTdir777/uploads/全都无权限访问 加入路径后再次扫描目录 发现/m3diNf0/目录下存在info.php,/se3reTdir777/目录下存在ind…