React首次加载渲染2次的问题

在开发React项目的时候,发现useEffect会调用2次的情况,依赖数组明明没有变化,怎么会调用2次?百思不得其解,依赖没变化的话,那肯定是整个组件重渲染了。

最最简单的代码如下:

const container = document.getElementById('root')!;
const root = createRoot(container);root.render(<React.StrictMode><App /></React.StrictMode>
);let times = 1;
function App() {console.log('render: ', times++);return <>main</>;
}

让我们看看控制台打印的结果:
在这里插入图片描述
什么!!!这怎么都渲染了2次!!!

后来查了一下,原来是React.StrictMode的原因!!!
StrictMode是一个用来检查项目中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

StrictMode 的作用有很多,如下所示:

  1. 识别不安全的生命周期;
  2. 关于使用过时字符串 ref API 的警告;
  3. 关于使用废弃的 findDOMNode 方法的警告;
  4. 检测意外的副作用;
  5. 检测过时的 context API。

但此篇文章就不展开一一赘述了,这里仅回归到本文探讨的问题:组件的一次更新流程,在视图真正刷新之前的部分都是可能被多次调用的,因而这些部分中不能出现副作用,开发环境下会刻意触发两次以使得开发者能注意到误用的副作用。

所以我们只要把 StrictMode 去掉就行了:

const container = document.getElementById('root')!;
const root = createRoot(container);root.render(<><App /></>
);let times = 1;
function App() {console.log('render: ', times++);return <>main</>;
}

这样就不会出现2次渲染了:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2979178.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

把 WordPress 变成 BaaS 服务:API 调用指南

有了前面两篇内容的铺垫&#xff0c;我们来聊聊 WordPress 作为 CMS / BaaS 服务使用时绕不开的问题&#xff0c;API 调用。 这篇内容同样的&#xff0c;会尽量少贴代码&#xff0c;简单的讲清楚一件事&#xff0c;降低阅读负担。 写在前面 首先&#xff0c;我们需要进行清晰…

【支付宝】对接手机网站支付踩坑点记录

前言 简单记录一下对接Wap支付的问题&#xff0c;alipay和wxpay认证过程差不多&#xff0c;有个体商户或企业即可&#xff0c;前者文档不易懂后者还好&#xff0c;但是wxpay门槛高&#xff0c;个人认为pc网站支付(native支付)就是为了收300认证费&#xff01; 应用公私钥 第一…

PROSAIL模型前向模拟与植被参数遥感提取代码实现

原文链接&#xff1a;PROSAIL模型前向模拟与植被参数遥感提取代码实现https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247602140&idx7&sn7c4ca9239865d536ba81ba4c26a34031&chksmfa820e3bcdf5872d540c0dfe8c533c8696c8b4658427aab254f246a739f96b36bc37…

IDEA 加大运行内存

IDEA 中&#xff0c;有时会出现运行卡顿的情况&#xff0c;大概率是内存不足导致的&#xff0c;可以通过如下步骤加大运行内存&#xff1a; 自定义虚拟机内存。 根据电脑内存大小设置&#xff0c;16G内存推荐设置为4G。 重启IDEA&#xff0c;使新配置生效。 显示内存占用。…

在选择试验台底座时,应注意哪些问题——河北北重

在选择试验台底座时&#xff0c;应注意以下几个方面&#xff1a; 底座尺寸和承载能力&#xff1a;底座的尺寸和承载能力应与试验台的尺寸和所需承载的设备重量相匹配&#xff0c;确保底座能够稳定承载试验台和设备。 材料和质量&#xff1a;底座的材料应具有足够的强度和耐久性…

【视觉论文】VIT - Vision Transformers

论文&#xff1a;AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 链接&#xff1a;https://arxiv.org/abs/2010.11929 很多人博主都写烂了的论文&#xff0c;我到现在才真正翻开论文看&#xff0c;21年的工作&#xff0c;正好是刚毕业那年&…

中医药性笔记

目录 当归黄芪党参白术甘草茯苓半夏陈皮升麻柴胡 当归 补血。 当归&#xff0c;腾讯医典 黄芪 土金之药。 补中气的同时补肺气。益卫固表、利水消肿、 腾讯医典黄芪 党参 土金之药。健脾益肺&#xff0c;生津养血。 党参补气之力弱于人参、用于脾肺气虚的轻症。 党…

TPS54560BQDDARQ1功能和参数介绍及如何进行热管理

制造商:Texas Instruments 产品品种:开关稳压器 RoHS:是 安装风格:SMD/SMT 封装 :SO-PowerPad-8 输出电压:0.8 V to 58.8 V 输出电流:5 A 输出端数量:1 Output 最大输入电压:60 V 拓扑结构:Buck 最小输入电压:4.5 V 开关频率:100 kHz to 2.5 MHz 最小作业温度:- 40 C 最大作业温…

贪吃蛇游戏C语言破解:成为编程高手的必修课!

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章专栏&#xff1a;C语言实战项目 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 1、游戏效果演示 贪吃蛇游戏效果演示 2、win32 A…

vue2+vxe-table实现表格增删改查+虚拟滚动

vue2vxe-table实现表格增删改查虚拟滚动 使用的vxe-table版本&#xff1a;v3.x (vue 2.6 长期维护版) 完整代码 <template><div><vxe-toolbar ref"xToolbar" export :refresh"{query: findList}"><template #buttons><vxe-b…

1W 1.5KVDC 3KVDC 隔离宽范围输入,单、双输出 DC/DC 电源模块——TP2L-1W 系列

TP2L-1W系列是一款高性能、超小型的电源模块&#xff0c;宽范围2&#xff1a;1,4:1输入&#xff0c;输出有稳压和连续短路保护功能&#xff0c;隔离电压为1.5KVDC&#xff0c;3KVDC工作温度范围为–40℃到85℃。特别适合对输出电压的精度有严格要求的地方&#xff0c;外部遥控功…

瑞_Docker(笔记超详细,有这一篇就够了)

文章目录 1 Docker入门1.1 卸载旧版Docker1.2 安装Docker1.2.1 安装Docker的yum库1.2.2 配置Docker的yum源1.2.3 安装Docker1.2.4 启动和校验&#xff08;开机自启&#xff09;1.2.5 配置镜像加速 1.3 使用示例&#xff1a;部署MySQL1.3.1 命令解读 2 Docker基础2.1 常见命令2.…

第二届 eBPF 开发者大会分享回顾 - Pipy 与 eBPF:重塑系统级编程的新范式

四月的西安&#xff0c;春意盎然&#xff0c;这座古城在温暖的春风中更添了几分旖旎风光。第二届 eBPF 开发者大会在西安顺利召开。 本次大会由西安邮电大学主办&#xff0c;主题为“发挥 eBPF 技术力量&#xff0c;提升计算机系统可观测性和性能”&#xff0c;旨在探讨和分享 …

世界读书日 | 开发者必读书单重磅来袭,华为云DTSE专家天团力荐

春色恰如许&#xff0c;读书正当时。 读书&#xff0c;就像解锁一把神秘钥匙&#xff0c;为开发者洞开新世界的大门&#xff0c;赋予他们破译复杂难题的能力、挑战未知领域的勇气。书页翻动间&#xff0c;开发者得以站在巨人的肩膀上&#xff0c;汲取前人经验&#xff0c;积蓄…

比特币之路:技术突破、创新思维与领军人物

比特币的兴起是一段充满技术突破、创新思维和领军人物的传奇之路。在这篇文章中&#xff0c;我们将探讨比特币发展的历程&#xff0c;以及那些在这一过程中发挥重要作用的关键人物。 技术突破与前奏 比特币的诞生并非凭空而来&#xff0c;而是建立在先前的技术储备之上。在密码…

自定义数据 微调CLIP (结合paper)

CLIP 是 Contrastive Language-Image Pre-training 的缩写&#xff0c;是一个擅长理解文本和图像之间关系的模型&#xff0c;下面是一个简单的介绍&#xff1a; 优点&#xff1a; CLIP 在零样本学习方面特别强大&#xff0c;它可以&#xff08;用自然语言&#xff09;给出图像…

lementui el-menu侧边栏占满高度且不超出视口

做了几次老是忘记&#xff0c;这次整理好逻辑做个笔记方便重复利用&#xff1b; 问题&#xff1a;elementui的侧边栏是占不满高度的&#xff1b;但是使用100vh又会超出视口高度不美观&#xff1b; 解决办法&#xff1a; 1.获取到侧边栏底部到视口顶部的距离 2.获取到视口的高…

操作系统:进程间通信 | 管道

目录 1.进程间通信介绍 1.1.简要介绍 1.2.进程间通信的目的 1.3.进程间通信的本质 2.管道 2.1.管道的通信原理 2.2.匿名管道 2.3.命名管道 2.4.基于匿名管道的进程池demo 2.4.1.进程池的相关引入 2.4.2.整体框架的分析 2.4.3.代码的实现 1.进程间通信介绍 1.1.简…

华为认证FAQ | 考试预约、考券购买常见问题

●考试预约常见问题● Q : 如何进行考试预约&#xff1f; A : 登录“华为人才在线官网” >>参考考试预约操作指引在线预约考试>>检查考试预约记录&#xff0c;确认预约成功 (私信获取考试预约操作指引文档&#xff09;。&#xff08;注&#xff1a;非本人预约…

程序员学CFA——数量分析方法(四)

数量分析方法&#xff08;四&#xff09; 常见概率分布基本概念离散型随机变量与连续型随机变量离散型随机变量连续型随机变量 分布函数概率密度函数&#xff08;PDF&#xff09;累积分布函数&#xff08;CDF&#xff09; 离散分布离散均匀分布伯努利分布二项分布定义股价二叉树…