React 渲染函数render、初始化函数、更新函数运行了两次,原因为何,如何解决? React.StrictMode

文章目录

Intro

我在用 react 写一个 demo ,当我在某个自定义组件的 return 语句之前加上一句log之后,发现:每次页面重新渲染,该行日志都打印了两次!

慌!难道我的自定义组件哪里写得有问题?

第一步验证:找到这个 demo 应用的根节点 App.jsx ,在其 return 语句之前加一行日志,重新渲染页面,观察:日志会被打印几次?

也是两次!

那么错误就不是发生在我的自定义组件处(它总不能影响到外层未修改的组件的行为表现吧)。

以下为我的项目截图:

官网解释

搜索之后,得出结论:

React 在其升级迭代的过程中,为帮助其用户(众多开发人员)减少升级过程中的bug,提供了一个叫做 StrictMode 的API。这个API有如下特性(见 https://react.dev/reference/react/StrictMode#strictmode ):

  1. 启用范围:可对整个应用(中的组件)启用该模式,也可以对部分组件启用该模式。

  2. StrictMode这个API会导致两次渲染 ,目的是为了更好地找出程序bug,以修复之(一些已被弃用的、受警告的API也可以被发现,改正)。

  3. 启用方式:用React.StrictMode包在想应用该模式的组件外层即可,包在不同层级会影响启用范围大小。

  4. 你会不会担心这个二次渲染影响程序性能?别怕。这个特性仅开发阶段才有,官网原文:development-only

解决

既然是官方为减少我们的bug出现率而提供的、仅在开发阶段出现的API特性,那其实我们可以不用很担心 React组件重复渲染对我们程序性能的影响。

如果你还是不喜欢,取消该特性即可。

全局搜索 StrictMode,移除该代码即可(写法略,能碰到这个问题且产生疑问、搜索到此处的同行应该懂怎么移除)。

另一篇官网文章------初始化函数或更新函数运行了两次

初始化函数或更新函数运行了两次
https://zh-hans.react.dev/reference/react/useState#my-initializer-or-updater-function-runs-twice

图中的内容表述了以下两点:

  1. 为什么我们的 react 组件执行了两次(render渲染方法、构造方法、state更新方法等)?

    这是因为React的设计中,在严格模式(StrictMode)下就是如此(执行两次)。

  2. 这个 "严格模式下 react组件的方法执行两次"的设计目的是什么?

    减少bug(图中下半部分为一个实例)。

相关推荐
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
problc3 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼4 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull5 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
待磨的钝刨5 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山10 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js