useEffect的第二个参数

目录

1、第一个参数:

 2、第二个参数:

2.1  不传值:无限循环

2.2  空数组作为依赖:执行一次

2.3  基本类型作为依赖:无限循环

2.4  引用类型

2.4.1  数组作为依赖:无限循环

  2.4.2  函数作为依赖:无限循环

  2.4.3  对象作为依赖:无限循环


1、第一个参数:

        是一个函数,必传项。是组件要执行的副作用。可以看做componentDidMountcomponentDidUpdate 和 componentWillUnmount 这三个函数的组合。

const [count, setCount] = useState(0);useEffect(() => {// 普通函数,执行副作用,可以实现componentDidMount、componentDidUpdateconsole.log('执行副作用');   // return函数, 组件销毁时清除副作用,可以实现componentWillUnmountreturn () => {            console.log("清除副作用");};
}, [count]);

 2、第二个参数:

        可以不传或者是一个数组,非必传项。数组里面依赖改变时候副作用函数才会重新更新。

所谓依赖改变就是  对比 [ 之前值 === 之后值 ] ,如果为true不执行useEffect,为false重新执行useEffect

第二个参数类型:不传、[]、由基本类型或者引用类型组成的数组

2.1  不传值:无限循环

【现象】: useEffectuseEffectuseEffect 会在第一次渲染以及每次更新渲染后都执行

原因

        第一次渲染后执行一次useEffect,useEffect中回调函数改变state值,state值改变触发组件重新渲染,useEffect没有比较值,useEffect重新执行,useEffect中回调函数改变state值,state值改变触发组件重新渲染,无限循环

注意:不传值是一种缺失依赖关系的情况,不建议这么做。

const [count, setCount] = useState<number>(1);
useEffect(() => {setTimeout(() => {setCount(count + 1);}, 1000);console.log(`第二个参数: 不传值, 第 ${count} 次执行`);
});// 打印log,无限循环
第二个参数: 不传值, 第 1 次执行
第二个参数: 不传值, 第 2 次执行
第二个参数: 不传值, 第 3 次执行
第二个参数: 不传值, 第 ... 次执行

2.2  空数组作为依赖:执行一次

【现象】: useEffect 会在第一次渲染后执行一次

【原因】: 第一次渲染后执行一次一次useEffect,useEffect中回调函数改变state值,state值改变触发组件重新渲染,useEffect中 [] 没有值,依赖没变,不触发useEffect,不执行回调函数, state 无更新,不触发组件重新渲染,至此结束

const [count, setCount] = useState<number>(1);
useEffect(() => {setTimeout(() => {setCount(count + 1);}, 1000);console.log(`第二个参数: 空数组, 第 ${count} 次执行`);
}, []);// 打印log,执行一次
第二个参数: 空数组, 第 1 次执行

2.3  基本类型作为依赖:无限循环

基本类型有:整型、浮点型、布尔型(true,false)、字符型、字符串、空值或null(Null)

【现象】: useEffect 会在第一次渲染以及每次更新渲染后都执行。

【原因】: 第一次渲染后执行一次useEffect,useEffect中回调函数改变state值,state值改变触发组件重新渲染,useEffect比较值(count)改变,useEffect重新执行,useEffect中回调函数改变state值,state值改变触发组件重新渲染,无限循环。

注意:传入第二个参数,只有一个值,比较该值有变化就执行,如果有多个值的数组,会比较每一个值,有一个变化就执行

const [count, setCount] = useState<number>(1);  // 基本类型以number为例
useEffect(() => {setTimeout(() => {setCount(count + 1);}, 1000);console.log(`第二个参数: 基本类型, 第 ${count} 次执行`);
}, [count]);// 打印log,无限循环
第二个参数: 基本类型, 第 1 次执行
第二个参数: 基本类型, 第 2 次执行
第二个参数: 基本类型, 第 3 次执行
第二个参数: 基本类型, 第 ... 次执行

2.4  引用类型

2.4.1  数组作为依赖:无限循环

【现象】useEffect 会在第一次渲染以及每次更新渲染后都执行。

【原因】:第一次渲染后执行一次useEffect,useEffect中回调函数改变state值,state值改变触发组件重新渲染,useEffect依赖项arr发生变化,此处依赖数组执行浅层比较[...] === [...] 为false)useEffect重新执行,useEffect中回调函数改变state值,state值改变触发组件重新渲染,无限循环

const [count, setCount] = useState(1);
const newArr = [4,5];
useEffect(() => {setTimeout(() => {setCount(count+1);}, 1000);console.log(`第二个参数: 数组, 第 ${count} 次执行`);
}, [newArr]);// 打印log,无限循环
第二个参数: 数组, 第 1 次执行
第二个参数: 数组, 第 2 次执行
第二个参数: 数组, 第 3 次执行
第二个参数: 数组, 第 ... 次执行

【测试】去除setTimeout会出现什么情况?---无限循环

        因为useEffect频繁调用setState,state不断改变

const [count, setCount] = useState(1);
const newArr = [4,5];
useEffect(() => {setCount(count+1);console.log(`第二个参数: 基本类型, 第 ${count} 次执行`);
}, [newArr]);// 打印log报错,说:超出最大更新深度

【解决】 使用useRef,useRef会在每次渲染时返回同一个ref对象,返回的ref在组件的整个生命周期内保持不变

const [count, setCount] = useState(1);
const refArr = useRef([4, 5, 6]);
useEffect(() => {setCount(count+1);console.log(`第二个参数: 数组, 第 ${count} 次执行`);
}, [refArr.current]);// 打印log,执行一次
第二个参数: 数组, 第 1 次执行

  2.4.2  函数作为依赖:无限循环

【现象】useEffect 会在第一次渲染以及每次更新渲染后都执行。

【原因】:第一次渲染后执行一次useEffect,useEffect中回调函数改变state值,state值改变触发组件重新渲染,useEffect依赖项consoleFunction函数发生变化,此处依赖函数执行浅层比较(每次渲染都重新创建一个新的函数 function(前) === function(后)为false)useEffect重新执行,useEffect中回调函数改变state值,state值改变触发组件重新渲染,无限循环

const [count, setCount] = useState(1);
const consoleFunction = () => {console.log('consoleFunction');
};
useEffect(() => {setTimeout(() => {setCount(count + 1);}, 1000);console.log(`第二个参数: 函数, 第 ${count} 次执行`);
}, [consoleFunction]);// 打印log,无限循环
第二个参数: 函数, 第 1 次执行
第二个参数: 函数, 第 2 次执行
第二个参数: 函数, 第 3 次执行
第二个参数: 函数, 第 ... 次执行

【测试】去除setTimeout会出现什么情况?---无限循环

        因为useEffect频繁调用setState,state不断改变

        打印报错:“ 超出最大更新深度 ”

【解决】: 使用useCallback,useCallback返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新

const [count, setCount] = useState(1);
const consoleFunction = useCallback(() => {console.log('consoleFunction');
}, []);
useEffect(() => {setCount(count + 1);console.log(`第二个参数: 函数, 第 ${count} 次执行`);
}, [consoleFunction]);// 打印log,执行一次
第二个参数: 函数, 第 1 次执行

  2.4.3  对象作为依赖:无限循环

【现象】useEffect 会在第一次渲染以及每次更新渲染后都执行。

【原因】:第一次渲染后执行一次useEffect,useEffect中回调函数改变state值,state值改变触发组件重新渲染,useEffect依赖项obj发生变化,此处依赖对象执行浅层比较( {...}=== {...} 为false)useEffect重新执行,useEffect中回调函数改变state值,state值改变触发组件重新渲染,无限循环

const [count, setCount] = useState(1);
const obj = {name: 'zhangsan'};
useEffect(() => {setTimeout(() => {setCount(count + 1);}, 1000);console.log(`第二个参数: 对象, 第 ${count} 次执行`);
}, [obj]);// 打印log,无限循环
第二个参数: 对象, 第 1 次执行
第二个参数: 对象, 第 2 次执行
第二个参数: 对象, 第 3 次执行
第二个参数: 对象, 第 ... 次执行

【测试】去除setTimeout会出现什么情况?---无限循环

        因为useEffect频繁调用setState,state不断改变

        打印报错:“ 超出最大更新深度 ”

【解决】: 使用useMemo,useMemo该回调函数仅在某个依赖项改变时才会更新。此处使用[ ]依赖,组件重新渲染后对象不再重新定义

const [count, setCount] = useState(1);
const obj = useMemo(() => ({name: 'zhangsan'}), []);
useEffect(() => {setCount(count + 1);console.log(`第二个参数: 对象, 第 ${count} 次执行`);
}, [obj]);// 打印log
第二个参数: 对象, 第 1 次执行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/658817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣(leetcode)第118题杨辉三角(Python)

118.杨辉三角 题目链接&#xff1a;118.杨辉三角 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] …

高光谱图像加载、归一化和增强(jupyter book)

1.获取高光谱图像&#xff1a;我用的是indian_pines的数据集&#xff0c;感兴趣的兄弟可以自行去官方网下载&#xff0c;gt的那个是它的标签哦&#xff0c;别搞错了。 2.图像加载&#xff1a; &#xff08;1&#xff09;从本地路径加载 import scipy.io as sio# 文件路径 fil…

乘积数量(c++题解)

题目描述 给定一个长度为 n 且不包含 0 的整数序列 。 请你计算以下两值&#xff1a; 使得 为负的索引对 l,r 的数量。使得 为正的索引对 l,r 的数量。 输入格式 第一行一个整数 。 第二行包含 个整数 。 输出格式 共一行&#xff0c;输出单个空格隔开的两个整数&a…

蓝桥杯---牌型种数

小明被劫持到X赌城&#xff0c;被迫与其他3人玩牌。一副扑克牌(去掉大小王牌,共52张)&#xff0c;均匀发给4个人&#xff0c;每个人13张。这时&#xff0c;小明脑子里突然冒出一个问题&#xff1a;如果不考虑花色&#xff0c;只考虑点数&#xff0c;也不考虑自己得到的牌的先后…

排序链表---归并--链表OJ

https://leetcode.cn/problems/sort-list/submissions/499363940/?envTypestudy-plan-v2&envIdtop-100-liked 这里我们直接进阶&#xff0c;用时间复杂度O(nlogn)&#xff0c;空间复杂度O(1)&#xff0c;来解决。 对于归并&#xff0c;如果自上而下的话&#xff0c;空间复…

Collections集合工具类-JAVA

java.util.Collections:是个集合工具类它不是集合&#xff0c;而是集合的工具类 常用 API&#xff1a;注意 binarySearch 方法要求元素有序 方法实现&#xff1a; public class Test01 {public static void main(String[] args) {ArrayList<String>list1new ArrayList…

SpringBoot整合RabbitMq企业级使用封装

SpringBoot整合RabbitMq企业级使用封装 1、RabbitMq基础说明2、SpringBoot整合RabbitMq&#xff0c;以及RabbitMq的封装和高级用法2.1、pom.xml2.2、application.yml2.3、Mq配置类MessageQueueConfiguration2.3.1、代码2.3.2、设置replyTimeout2.3.3、publisher-confirm-type和…

【C语言】探索数据结构:单链表和双链表

目录 &#x1f4a1;链表的概念和结构 &#x1f4a1;链表的分类 &#x1f4a1;无头单向非循环链表&#xff08;单链表&#xff09;的实现 定义节点结构 单链表的尾部插入 单链表的头部插入 单链表的尾部删除 单链表的头部删除 在指定位置插入前数据 在指定位置之后插入数…

w3c标准

w3c&#xff08;万维网联盟&#xff09;&#xff1a;是一个公益基金组织&#xff0c;由互联网之父&#xff08;博纳斯李&#xff09;牵头组织起来的&#xff0c;用于专门维护互联网相关技术的发展和规范。 w3c标准&#xff0c;不是一个标准&#xff0c;而是一系列标准的集合&am…

人工智能基础-Numpy.array基本操作

基本属性 查看维度 x.ndim查看维度&#xff08;元组形式&#xff09; x.shape元素个数 x.size数据访问 子矩阵 内容同步修改 加是copy&#xff08;&#xff09;则不同步修改 Reshape 修改维度 参数为-1时自动识别个数 合并 np.concatenate([x, y])沿着列合并 np.co…

Springboot使用数据库连接池druid

springboot框架中可以使用druid进行数据库连接池&#xff0c;下面介绍druid在springboot中使用和参数配置介绍。 数据库连接池&#xff08;Druid&#xff09;是一种用于管理数据库连接的机制&#xff0c;其工作原理和常见使用方法如下&#xff1a; 原理&#xff1a;数据库连接…

kafka实现延迟队列

前言 首先说一下延迟队列这个东西&#xff0c;实际上实现他的方法有很多&#xff0c;kafka实现并不是一个最好的选择&#xff0c;例如redis的zset可以实现&#xff0c;rocketmq天然的可以实现&#xff0c;rabbitmq也可以实现。如果切换前几种方案成本高的情况下&#xff0c;那…

OSDI 2023: LVMT: An Efficient Authenticated Storage for Blockchain

我们使用以下6个分类标准对本文的研究选题进行分析: 1. 研究方向: 区块链可扩展性: 提高交易吞吐量和减少确认时间的研究,例如零知识证明、分片和状态通道。密码学技术: 开发或改进用于区块链应用的新密码原语,例如椭圆曲线、承诺方案和累加器。区块链存储和效率: 优化区块…

02神经网络的学习及代码实现

“学习”是指从训练数据中自动获取最优权重参数的过程。引入损失函数指标&#xff0c;学习的目的是以该损失函数为基准&#xff0c;找出尽可能小的损失函数的值。 1、从数据中学习 从数据中学习规律&#xff0c;模式&#xff0c;避免人为介入。 先从图像中提取特征量&#x…

【GAMES101】Lecture 13 光线追踪 Whitted-Style

目录 光线追踪 基本的光线追踪算法 Whitted-Style光线追踪 求曲面交点 求三角形交点 Mller Trumbore Algorithm&#xff08;MT算法&#xff09; 光线追踪 这里讲一下为什么我们需要光线追踪&#xff0c;主要是因为光栅化没有办法很好的处理全局的光照效果&#xff0c;就…

MySQL备份和恢复(二)mysqldump

注意&#xff1a;mysqldump是完全备份 一、mysqldump备份命令 1、 备份数据库 含创建库语句 &#xff08;1&#xff09;备份指定数据库 完全备份一个或多个完整的库&#xff0c; mysqldump -uroot -p[密码] --databases 库名1 [库名2].. >/备份路径/备份文件名.sql#导出…

如何恢复已删除的照片?

在这篇综合文章中发现恢复丢失照片的有效且免费的方法。无论您使用的是智能手机、iPhone、Windows 计算机、Mac、SD 卡还是数码相机&#xff0c;我们都提供有关如何恢复已删除照片的分步说明。此外&#xff0c;学习一些有价值的技巧&#xff0c;以防止将来意外删除照片。 意外…

2024.1.28周报

目录 摘要 ABSTRACT 一、文献阅读 1、题目 2、摘要 3、解决的问题 4、算法模型 5、总结 二、PINN方法 三、PINN神经网络源码 总结 摘要 本周我阅读了一篇题目为Physics Informed Deep Learning (Part I): Data-driven Solutions of Nonlinear Partial Differential…

配置vite自动按需引入 vant 组件

为什么学 按需加载可以减少包体积,优化加载性能 学习内容 全局注册组件 import 需要的组件import 组件样式使用 app.use 注册组件 Tree Shaking 介绍使用 什么是 tree shaking&#xff1f; Tree shaking是一种优化技术&#xff0c;用于减少JavaScript或其他编程语言中未被使用…

【2024程序员必看】鸿蒙应用开发行业分析

鸿蒙操作系统沉浸四年&#xff0c;这次终于迎来了破局的机会&#xff0c;自从2023年华为秋季发布会上宣布鸿蒙 Next操作系统不在兼容Android后&#xff0c;就有不少大厂开始陆续与华为达成了鸿蒙原生应用的开发合作&#xff0c;据1月18日华为官方宣布110多天的产业合力“突进”…