当前位置: 首页 > 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 介绍

相关文章:

  • 昇思25天学习打卡营第6天|使用静态图加速
  • Django 模版转义
  • LeetCode 算法:二叉树的中序遍历 c++
  • qemu 安装ubuntu22.04虚拟机 -纯命令行-可ssh-带网络-编译安装 linux kernel-编译安装 kernel module
  • 打包体积分析和优化
  • JDK动态代理
  • SolidityFoundry 安全审计测试 Delegatecall漏洞2
  • 【Unity服务器01】之【AssetBundle上传加载u3d模型】
  • 前端 三维空间笔记
  • Java中的NIO编程实践精华
  • 程序的“通用性”和“过度设计”困境
  • zookeeper学习、配置文件参数详解
  • SSM旅游系统
  • WDF驱动开发-WDF总线枚举(一)
  • obsidian中用check list 打造待办清单
  • [数据结构]链表的实现在PHP中
  • 08.Android之View事件问题
  • angular2开源库收集
  • Asm.js的简单介绍
  • ES6, React, Redux, Webpack写的一个爬 GitHub 的网页
  • EventListener原理
  • js ES6 求数组的交集,并集,还有差集
  • Linux后台研发超实用命令总结
  • Netty 框架总结「ChannelHandler 及 EventLoop」
  • Selenium实战教程系列(二)---元素定位
  • Tornado学习笔记(1)
  • 彻底搞懂浏览器Event-loop
  • 关键词挖掘技术哪家强(一)基于node.js技术开发一个关键字查询工具
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 强力优化Rancher k8s中国区的使用体验
  • 十年未变!安全,谁之责?(下)
  • 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
  • 微信小程序上拉加载:onReachBottom详解+设置触发距离
  • 一天一个设计模式之JS实现——适配器模式
  • 译自由幺半群
  • 智能合约开发环境搭建及Hello World合约
  • ###STL(标准模板库)
  • #Linux(Source Insight安装及工程建立)
  • #如何使用 Qt 5.6 在 Android 上启用 NFC
  • $forceUpdate()函数
  • (3)STL算法之搜索
  • (ros//EnvironmentVariables)ros环境变量
  • (八)c52学习之旅-中断实验
  • (附源码)spring boot基于Java的电影院售票与管理系统毕业设计 011449
  • (离散数学)逻辑连接词
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (四)图像的%2线性拉伸
  • (转)Sublime Text3配置Lua运行环境
  • .[backups@airmail.cc].faust勒索病毒的最新威胁:如何恢复您的数据?
  • .NET Core MongoDB数据仓储和工作单元模式封装
  • .Net OpenCVSharp生成灰度图和二值图
  • .NET/C# 使窗口永不激活(No Activate 永不获得焦点)
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)