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

useEffect和useLayoutEffect的区别

烤冷面加辣条的抖音 - 抖音 (douyin.com)

一、看下面的代码,即使调换useLayoutEffect和useEffect的位置依旧是useLayoutEffect先输出。

import { useState, useEffect, useLayoutEffect } from "react";
const Index = () => {useLayoutEffect(() => {console.log("useLayoutEffect");}, []);useEffect(() => {console.log("useEffect");}, []);return (<><div>hahahahhah</div></>);
};
export default Index;

从下面代码可以看出useLayoutEffect有绝对的优先级,先执行

二、以下代码在点击刷新后,输出结果只和本身的顺序有关,全部是useLayoutEffect也是如此

三、

import { useState, useEffect, useLayoutEffect, useRef } from "react";
const Index = () => {const [aaa, setAaa] = useState(0);const [ccc, setCcc] = useState(false);const bbb = useRef(0);const clickFunction = () => {setAaa(aaa + 1)// bbb.current = bbb.current + 1;// setCcc(!ccc);};useEffect(() => {console.log("useEffect, [aaa]");}, [aaa]);useEffect(() => {console.log("useEffect,[]");}, []);useEffect(() => {console.log("useEffect");});useLayoutEffect(() => {console.log("useLayoutEffect,[]");}, []);useLayoutEffect(() => {console.log("useLayoutEffect");});return (<>{ccc ?<div>有CCC</div> :<div>没哟ccc</div>}<div>hahahahhah</div><button onClick={clickFunction}>32222222222222214</button></>);
};
export default Index;

点击后会输出:

???????????我们知道useEffect有依赖值的时,在依赖值发生变化时会执行useEffect,其他两个不知道怎么回事,应该是页面发生重新渲染了。就会有这两个的输出

四、

import { useState, useEffect, useLayoutEffect, useRef } from "react";
const Index = () => {const [aaa, setAaa] = useState(0);const [ccc, setCcc] = useState(false);const bbb = useRef(0);const clickFunction = () => {// setAaa(aaa + 1)// bbb.current = bbb.current + 1;setCcc(!ccc);};useEffect(() => {console.log("useEffect, [aaa]");}, [aaa]);useEffect(() => {console.log("useEffect,[]");}, []);useEffect(() => {console.log("useEffect");});useLayoutEffect(() => {console.log("useLayoutEffect,[]");}, []);useLayoutEffect(() => {console.log("useLayoutEffect");});return (<>{ccc ?<div>有CCC</div> :<div>没哟ccc</div>}<div>hahahahhah</div><button onClick={clickFunction}>32222222222222214</button></>);
};
export default Index;

点击后会输出:

???????????我们知道useEffect有依赖值的时,在依赖值发生变化时会执行useEffect,其他两个不知道怎么回事,应该是页面发生重新渲染了。就会有这两个的输出

五、在看开源项目的时候发现useEffect的使用场景有如下大多数都有依赖值

1、useEffect里如果造成内存泄露的化,会在return里清空

2、会请求数据

3、依赖值可以有多个,依赖值变化就会去执行相关函数

	useEffect(() => {// 全局使用国际化i18n.changeLanguage(language || getBrowserLang());setLanguage(language || getBrowserLang());setAntdLanguage();}, [language]);useEffect(() => {if (echartsRef?.current) {myChart.current = echarts.init(echartsRef.current as HTMLDivElement);}myChart?.current?.setOption(options);window.addEventListener("resize", echartsResize, false);return () => {window.removeEventListener("resize", echartsResize);myChart?.current?.dispose();};}, []);useEffect(() => {timer.current = setInterval(() => {setTime(moment().format("YYYY年MM月DD日 HH:mm:ss"));}, 1000);return () => {clearInterval(timer.current);};}, [time]);// 获取按钮权限列表const getAuthButtonsList = async () => {const { data } = await getAuthorButtons();setAuthButtons(data);};// 监听窗口大小变化const listeningWindow = () => {window.onresize = () => {return (() => {let screenWidth = document.body.clientWidth;if (!isCollapse && screenWidth < 1200) updateCollapse(true);if (!isCollapse && screenWidth > 1200) updateCollapse(false);})();};};useEffect(() => {listeningWindow();getAuthButtonsList();}, []);useEffect(() => {screenfull.on("change", () => {if (screenfull.isFullscreen) setFullScreen(true);else setFullScreen(false);return () => screenfull.off("change", () => {});});}, []);// 刷新页面菜单保持高亮useEffect(() => {setSelectedKeys([pathname]);isCollapse ? null : setOpenKeys(getOpenKeys(pathname));}, [pathname, isCollapse]);

更多参考官网:使用 Effect 同步 – React 中文文档

总结:

相关文章:

useEffect和useLayoutEffect的区别

烤冷面加辣条的抖音 - 抖音 (douyin.com) 一、看下面的代码&#xff0c;即使调换useLayoutEffect和useEffect的位置依旧是useLayoutEffect先输出。 import { useState, useEffect, useLayoutEffect } from "react"; const Index () > {useLayoutEffect(() >…...

[科研图像处理]用matlab平替image-j,有点麻烦,但很灵活!

做材料与生物相关方向的同学应该对image-j并不陌生&#xff0c;前几天有个师兄拜托我用image-j分析一些图片&#xff0c;但使用过后发现我由于不了解image-j的工作流程而对结果并不确信&#xff0c;而且image-j的功能无法拓展&#xff0c;对有些图片的处理效果并不好&#xff0…...

Node.js |(五)包管理工具 | 尚硅谷2023版Node.js零基础视频教程

学习视频&#xff1a;尚硅谷2023版Node.js零基础视频教程&#xff0c;nodejs新手到高手 文章目录 &#x1f4da;概念介绍&#x1f4da;npm&#x1f407;安装npm&#x1f407;基本使用&#x1f407;生产依赖与开发依赖&#x1f407;npm全局安装&#x1f407;npm安装指定包和删除…...

【ES专题】ElasticSearch集群架构剖析

目录 前言阅读对象阅读导航要点笔记正文一、ES集群架构1.1 为什么要使用ES集群架构1.2 ES集群核心概念1.2.1 节点1.2.1.1 Master Node主节点的功能1.2.1.2 Data Node数据节点的功能1.2.1.3 Coordinate Node协调节点的功能1.2.1.4 Ingest Node协调节点的功能1.2.1.5 其他节点功能…...

Kafka与Flink的整合 -- sink、source

1、首先导入依赖&#xff1a; <dependency><groupId>org.apache.flink</groupId><artifactId>flink-connector-kafka</artifactId><version>1.15.2</version></dependency> 2、 source&#xff1a;Flink从Kafka中读取数据 p…...

小鱼ROS

git clone git clone https://ghproxy.com/https://github.com/stilleshan/ServerStatus git clone 私有仓库 Clone 私有仓库需要用户在 Personal access tokens 申请 Token 配合使用.git clone https://user:your_tokenghproxy.com/https://github.com/your_name/your_priv…...

简单讲讲RISC-V跳转指令基于具体场景的实现

背景 在 RISC-V指令集中&#xff0c;一共有 6 条有条件跳转指令&#xff0c;分别是 beq、bne、blt、bltu、bge、bgeu。如下是它们的定义与接口 BEQ rs1, rs2, imm ≠ BNE rs1, rs2, imm &#xff1c; BLT rs1, rs2, imm ≥ BGE rs1, rs2, imm < unsigned BLTU rs1…...

第13章 Java IO流处理(一) File类

目录 内容说明 章节内容 一、 File类 内容说明 结合章节内容重点难点,会对重要知识点进行扩展,以及做示例说明等,以便更好理解重点难点 章节内容 一、 File类 1、文件与目录的描述类——File ✔️ File类并不用来进行文件的读/写操作,并未涉及到写入或读取文件内容的…...

测试面试题集锦(四)| Linux 与 Python 编程篇(附答案)

本系列文章总结归纳了一些软件测试工程师常见的面试题&#xff0c;主要来源于个人面试遇到的、网络搜集&#xff08;完善&#xff09;、工作日常讨论等&#xff0c;分为以下十个部分&#xff0c;供大家参考。如有错误的地方&#xff0c;欢迎指正。有更多的面试题或面试中遇到的…...

pytorch中的矩阵乘法

1. 运算符介绍 关于运算&#xff0c;*运算&#xff0c;torch.mul(), torch.mm(), torch.mv(), tensor.t() 和 *代表矩阵的两种相乘方式&#xff1a; 表示常规的数学上定义的矩阵相乘&#xff1b; *表示两个矩阵对应位置处的两个元素相乘。 1.1 矩阵点乘 *和torch.mul()等同…...

Java--Stream流详解

Stream是Java 8 API添加的一个新的抽象&#xff0c;称为流Stream&#xff0c;以一种声明性方式处理数据集合&#xff08;侧重对于源数据计算能力的封装&#xff0c;并且支持序列与并行两种操作方式&#xff09; Stream流是从支持数据处理操作的源生成的元素序列&#xff0c;源可…...

[PHP]ShopXO企业级B2C免费开源商城系统 v2.3.1

ShopXO 企业级B2C免费开源电商系统&#xff01; 求实进取、创新专注、自主研发、国内领先企业级B2C电商系统解决方案。 遵循Apache2开源协议发布&#xff0c;无需授权、可商用、可二次开发、满足99%的电商运营需求。 PCH5、支付宝小程序、微信小程序、百度小程序、头条&抖音…...

Python基础入门系列详解20篇

Python基础入门&#xff08;1&#xff09;----Python简介 Python基础入门&#xff08;2&#xff09;----安装Python环境&#xff08;Windows、MacOS、CentOS、Ubuntu&#xff09; Python基础入门&#xff08;3&#xff09;----Python基础语法&#xff1a;解释器、标识符、关键…...

P02项目(学习)

★ P02项目 项目描述&#xff1a;安全操作项目旨在提高医疗设备的安全性&#xff0c;特别是在医生离开操作屏幕时&#xff0c;以减少非授权人员的误操作风险。为实现这一目标&#xff0c;我们采用多层次的保护措施&#xff0c;包括人脸识别、姿势检测以及二维码识别等技术。这些…...

pandas 笔记:get_dummies分类变量one-hot化

1 函数介绍 pandas.get_dummies 是 pandas 库中的一个函数&#xff0c;它用于将分类变量转换为哑变量/指示变量。所谓的哑变量&#xff0c;就是将分类变量的每一个不同的值转换为一个新的0/1变量。在输出的DataFrame中&#xff0c;每一列都以该值的名称命名 pandas.get_dummi…...

PTE作文练习(一)

目录 65分备考建议 WE模版 范文 Supporting ideas: SWT 65分备考建议 RA重在多听标准的正确的示范&#xff0c;RS重在抓大放小&#xff0c;WFD重在整理错题&#xff0c;以及反反复复的车轮战&#xff0c;FIBRW重在“以对代记” 就是直接看答案&#xff0c;节约时间&#…...

如何做到一套FPGA工程无缝兼容两款不同的板卡?

试想这样一种场景,有两款不同的FPGA板卡,它们的功能代码90%都是一样的,但是两个板卡的管脚分配完全不同,一般情况下,我们需要设计两个工程,两套代码,之后还需要一直维护两个版本。 那么有没有一种自动化的方式,实现一个工程,编译出一个程序文件,下载到这两个不同的板…...

VSCode修改主题为Eclipse 绿色护眼模式

前言 从参加开发以来&#xff0c;一直使用eclipse进行开发&#xff0c;基本官方出新版本&#xff0c;我都会更新。后来出来很多其他的IDE工具&#xff0c;我也尝试了&#xff0c;但他们的主题都把我劝退了&#xff0c;黑色主题是谁想出来&#xff1f;&#x1f602; 字体小的时…...

conan和cmake编译器版本不匹配问题解决

conan和cmake编译器版本不匹配问题解决 1 问题现象2 解决方法2.1 在CMakeLists.txt禁止编译器检查2.1.1 修改方式 2.2 探查问题出现的根本原因2.2.1 安装升级gcc2.2.2 安装升级g 注 执行环境&#xff1a;ubuntu 1 问题现象 conan要求的编译器版本和cmake检测到的当前的编译器…...

float单精度浮点数如何在计算机中存储

文章目录 1 float型数据组成2 实际举例3 代码测试4 写在最后 1 float型数据组成 按照IEEE浮点标准存储浮点数时&#xff0c;一个float型的值由1个符号位&#xff08;最左边的位或最高有效位&#xff09;、8个指数位以及23个小数位依次组成: 符号位为0时表示正数&#xff0c;为1…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...