当前位置: 首页 > 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…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...