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://www.mzph.cn/diannao/2237.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【抽代复习笔记】14-群(八):变换群中的旋转、位似、平移变换群

定理1&#xff1a;集合A上的所有一一变换的集合G关于变换的乘法&#xff08;复合&#xff09;作成群。 证&#xff1a;首先&#xff0c;恒等变换ɛ:A→A(ɛ(x) x)是集合A上的一一变换&#xff0c;所以ɛ∈G&#xff0c;即G≠∅&#xff1b; ①对任意的f,g∈G&#xff0c;由映…

AI人工智能培训老师叶梓:大数据治理的关键工具:开源数据血缘分析系统

在大数据时代&#xff0c;数据的产生和传播速度日益加快&#xff0c;数据之间的关系也变得日益复杂。为了更好地管理和理解数据之间的关系&#xff0c;数据血缘分析系统应运而生。本文将介绍几个开源的数据血缘分析系统&#xff0c;它们在数据治理、数据质量管理和数据隐私保护…

ragflow 大模型RAG知识库使用案例

参考: https://github.com/infiniflow/ragflow/blob/main/README_zh.md 支持丰富的文件类型,包括 Word 文档、PPT、excel 表格、txt 文件、图片、PDF、影印件、复印件、结构化数据, 网页等。 运行步骤: 1、确保 vm.max_map_count 不小于 262144 【更多】: 如需确认 vm.…

ThingsBoard服务端使用RPC通过网关给设备发送消息

一、概述 1、发送服务器端网关RPC 二、案例&#xff1a; 1、建立设备与网关之间的通讯 2、查看设备和网关是否在线状态啊 3、通过 仪表盘&#xff0c;创建设备A的模拟RPC调用的窗口链接 4、在客户端的网关设备上订阅RPC网关的主题信息 5、通过服务端的窗口&#xff0c;发…

uni-app开发canvas绘图画画,如何实现后退功能

在uni-app中使用canvas进行绘图时&#xff0c;实现后退功能通常意味着你需要保存用户的每一步操作&#xff0c;然后提供一个机制来撤销最近的步骤。下面是一个基本的实现思路&#xff1a; 保存绘图步骤&#xff1a; 每当用户在canvas上绘制时&#xff08;比如通过touchMove事件…

python 对图片进行操作

Pillow是一个强大的图像处理库&#xff0c;它提供了许多用于打开、操作和保存图像的功能。 Image模块&#xff1a; Image模块提供了用于打开、创建、编辑和保存图像的基本功能。可以使用Image.open()函数来打开图像文件&#xff0c;或者使用Image.new()函数来创建新的图像,还可…

深度剖析Gateway在微服务治理中的关键角色

目录 一、多层网关 二、Gateway 路由规则 2.1 路由 2.2 谓词 2.3 过滤器 三、路由声明规则 3.1 谓词 寻址谓词 请求参数谓词 时间谓词 自定义谓词 一、多层网关 首先我们先了解下一个请求是如何到达服务端并得到相应的。过程如图所示&#xff1a; 首先网址解析的第一步是 DN…

设计模式学习笔记 - 开源实战四(中):剖析Spring框架中用来支持扩展的设计模式

概述 上篇文章&#xff0c;学习了 Spring 框架背后蕴含的设计思想&#xff0c;比如约定优于配置、低侵入松耦合、模块化轻量级等等。这些设计思想可以借鉴到其他框架开发中&#xff0c;在大的设计层面提高框架的代码质量。 除了上篇文章降到的设计思想&#xff0c;实际上&…

CSS特效---环形进度条

1、演示 2、一切尽在代码中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"w…

炉管设备的内部构造详解

知识星球&#xff08;星球名&#xff1a;芯片制造与封测社区&#xff09;里的学员问&#xff1a;炉管设备&#xff08;立式&#xff09;的内部构造是怎样的&#xff1f; 如上图&#xff0c;是一个典型的&#xff1a; 上半部&#xff1a; Heating Element&#xff08;加热线圈…

树莓派使用总结

手上拿到了一块Raspberry Pi 4B板子。研究一下怎么用。 安装系统 直接到官网【Raspberry Pi 】下载在线安装助手 安装好后&#xff0c;打开软件&#xff0c;选择好板子型号、系统、TF卡&#xff0c;一路下一步就行。 树莓派接口 直接查看官方的资料【Raspberry Pi hardwar…

实用电路图轻松掌握,一通百通 | 百能云芯

通过以下各种各样的实用电路&#xff0c;大家可以了解元器件的结构、特性、动作原理及电路的基本控制方式&#xff0c;掌握一些控制规律&#xff0c;这样的话&#xff0c;在日后的电路识图中就能融会贯通&#xff0c;一通百通。 文章中的电路图有难有易&#xff0c;有些图现在…

贪吃蛇项目实战——学习详解

前言:贪吃蛇是一个经典的游戏&#xff0c; 本节将使用c语言实现一个简易的的贪吃蛇小游戏。 本节内容适合已经学完c语言还有数据结构链表的友友们。 我们要实现的贪吃蛇是在控制台进行游戏的。 它运行起来是这样的&#xff1a; 贪吃蛇 那么&#xff0c; 为了实现这个小游戏。 我…

YOLO8实战:行人跌倒检测系统

yolo8行人跌倒检测系统 前言 随着科技的不断进步&#xff0c;人工智能和深度学习技术已广泛应用于各行各业&#xff0c;尤其是在人身安全检测方面。传统的跌倒检测方法依赖于人工观察&#xff0c;但这种方法不仅耗时耗力&#xff0c;而且容易因人为因素导致误判或漏判。因此&a…

叉车4G无线视频监控管理解决方案:提升效率,保障安全

在现代物流行业中&#xff0c;叉车被广泛应用于仓储和物流领域&#xff0c;成为提升效率和降低成本的重要工具。然而&#xff0c;叉车作为重要的运输设备&#xff0c;其安全性和管理效率也备受关注。针对这一问题&#xff0c;叉车4G无线视频监控管理解决方案应运而生。 叉车是仓…

C++从零开始websevere服务器从搭建到上线|使用华为云服务器进行项目部署

文章目录 公网IP和私有IP地址公网IP私有IP地址为什么我们需要两个IP地址呢 云服务器设置防火墙配置基础配置云服务器防火墙配置云服务器安全组 总结 问题背景 关于使用华为云服务器进行项目部署&#xff0c;25届C秋招选手&#xff0c;刚写完一个websever项目&#xff0c;想着部…

工厂方法模式设计实验

【实验内容】 楚锋软件公司欲开发一个系统运行日志记录器&#xff08;Logger&#xff09;。该记录器可以通过多种途径保存系统的运行日志&#xff1a;例如通过文件记录或数据库记录&#xff0c;用户可以通过修改配置文件灵活地更换日志记录方式。在设计各类日志记录器时&#…

【智能算法】回溯搜索算法(BSA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2013年&#xff0c;P Civicioglu等人受到当前种群与历史种群之间的差分向量的引导启发&#xff0c;提出了回溯搜索算法&#xff08;Backtracking Search Algorithm, BSA&#xff09;。 2.算法原理…

刷题训练之二分查找

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握二分查找算法 > 毒鸡汤&#xff1a;学习&#xff0c;学习&#xff0c;再学习 ! 学&#xff0c;然后知不足。 > 专栏选自&#xff1a;刷题…

分析 MyBatis/MyBatis-Plus 慢 SQL 的分析组件 --SQL 慢镜️‍♀️

大家好&#xff01;我是聪ζ&#x1f331;我做了一个分析 MyBatis/MyBatis-Plus 慢 SQL 的分析组件 --SQL 慢镜&#x1f575;️‍♀️ GitHub仓库地址&#x1f680;: https://github.com/lhccong/sql-slow-mirror 点点 star 我的朋友们✨ 背景&#x1f9ca;&#xff1a; 大家…