react hook useEffect 依赖传入后如何执行?
2023-09-14 09:07:43 时间
先来了解下react hooks 闭包陷阱:
原因:
闭包陷阱产生的原因就是 useEffect 等 hook 里用到了某个 state,但是没有加到 deps 数组里,这样导致 state 变了却没有执行新传入的函数,依然引用的之前的 state。
解决方式一:
把 state 设置到 deps依赖项 里,并添加清理函数;闭包陷阱的解决也很简单,正确设置 deps 数组就可以了,这样每次用到的 state 变了就会执行新函数,引用新的 state。不过还要注意要清理下上次的定时器、事件监听器等。
解决方式二:
useRef:闭包陷阱产生的原因就是 useEffect 的函数里引用了某个 state,形成了闭包,那不直接引用不就行了?useRef 是在 memorizedState 链表中放一个对象,current 保存某个值。通过 useRef 保存回调函数,然后在 useEffect 里从 ref.current 来取函数再调用,避免了直接调用,也就没有闭包陷阱的问题了。
hooks 的原理:hooks 就是在 fiber 节点上存放了 memorizedState 链表,每个 hook 都从对应的链表元素上存取自己的值。
react hook useEffect 依赖传入后如何执行?
- 如果 useEffect 第二个参数传入 undefined 或者 null,那每次都会执行。
- 如果传入了一个空数组,只会执行一次。
- 否则会对比数组中的每个元素有没有改变,来决定是否执行。
- 同样,useMemo、useCallback 等也是同样的 deps 处理
参考文章:https://cloud.tencent.com/developer/article/2016207
https://blog.csdn.net/ttyt1217/article/details/126112536
相关文章
- 判断DLL文件是C/C++动态链接库还是.NET程序集及查看DLL依赖
- SpringBoot的pom.xml之依赖版本管理
- idea下远程debug时,一键上传本地代码到服务器指定目录,无需再依赖文件传输工具
- R语言有极值(EVT)依赖结构的马尔可夫链(MC)对洪水极值分析|附代码数据
- composer search 搜索 packagist.org 依赖包
- TP6.0 容器和依赖注入
- 【JDBC】JDBC 访问数据库 ( IntelliJ IDEA 创建 Gradle 工程 | build.gradle 导入数据库驱动依赖 jar 包 | 使用 JDBC 访问数据库 )
- 【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 创建 事件监听器 对应的 动态代理 | 动态代理的数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )
- 【Groovy】Gradle 构建工具 ( 自动下载并配置构建环境 | 提供 API 扩展与开发工具集成 | 内置 Maven 和 Ivy 依赖管理 | 使用 Groovy 编写构建脚本 )
- Maven依赖传递
- 性Oracle6的依赖性展开探索之旅(oracle6依赖)
- 深入解析Session是否必须依赖Cookie