当前位置: 首页 > news >正文

React useEffect 执行时机

默认情况下,Effect 在每次渲染(包括初始渲染)后运行。
如果 React 的所有依赖项都与上次渲染时的值相同,则将跳过本次 Effect。

useEffect(() => {// 这里的代码会在每次渲染后执行
});useEffect(() => {// 这里的代码只会在组件挂载后执行return () =>{// 这里的 cleanup 清理函数,在组件卸载时执行}
}, []);useEffect(() => {//这里的代码只会在每次渲染后,并且 a 或 b 的值与上次渲染不一致时执行return () =>{// cleanup 清理函数// 1. 在 React 执行该 Effect 之前,它会执行最近一次渲染的 Effect cleanup 函数。// 2. 在组件卸载时执行}
}, [a, b]);

不必使用 Effect 来转换渲染所需的数据

当更新 state 时 (setState):

  1. React 首先会调用组件函数来计算应该显示在屏幕上的内容(渲染)
  2. 然后会把这些变化“提交”到 DOM 中来更新屏幕(提交)
  3. 然后 React 会执行 Effect
  4. 如果 Effect 中 也立即更新了 state,就会重新执行整个流程。
    为了避免不必要的渲染流程,应在组件顶层转换数据。这些代码会在你的 props 或 state 变化时自动重新执行。

如何判断两次渲染时依赖是否相同
使用Object.is来进行比较
Object.is 介绍

http://www.lryc.cn/news/381798.html

相关文章:

  • centos7 根目录扩容
  • 为什么要做Redis分区和分片
  • 电脑不小心删除的文件怎么恢复?4个必备恢复方法!
  • GPTCache:革新大模型缓存,降低成本,提升效率
  • [Day 15] 區塊鏈與人工智能的聯動應用:理論、技術與實踐
  • 绘唐3下载地址
  • 两个基因相关性细胞系(CCLE)(升级)
  • 2024全国各地高考录取分数线一览表(含一本、二本、专科)
  • 汇编快速入门
  • Apache Tomcat 10.1.25 新版本发布 java 应用服务器
  • 数据类型 运算符
  • WordPress网创自动采集并发布插件
  • (十三)、MQTT3.1.1-MQTT服务端数据结构设计
  • StackOverFlowError常见原因及解决方法总结
  • 【安全】Linux Fanotify使用入门
  • java的输出流File OutputStream
  • 32 - 判断三角形(高频 SQL 50 题基础版)
  • QT 中ListView和ListWidget有什么区别
  • Python酷库之旅-第三方库openpyxl(07)
  • 使用Python进行Web开发:从基础到实战
  • 打包体积分析和优化
  • numpy的array/asarray/asanyarray的格式转化错误问题解决
  • C++:STL容器-map
  • 你好,复变函数2.0
  • 汉语拼音字母表 (声母表和韵母表)
  • C++20中的Feature Test Mocros
  • 运维iptables与firewalld详解
  • 适用于 Android 的 几种短信恢复应用程序
  • Lodash-js工具库
  • Makefile实战论(一)