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

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

最最简单的代码如下:

javascript 复制代码
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 去掉就行了:

javascript 复制代码
const container = document.getElementById('root')!;
const root = createRoot(container);

root.render(
  <>
    <App />
  </>
);

let times = 1;
function App() {
  console.log('render: ', times++);
  return <>main</>;
}

这样就不会出现2次渲染了:

相关推荐
梦鱼12 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66613 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东14 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生15 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙15 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年20 分钟前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|21 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
kk不中嘞23 分钟前
Webpack 核心原理剖析
前端·webpack·node.js
Yvonne爱编码26 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码27 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d