javascript - 为什么 useState 会导致组件在每次更新时渲染两次?
问题描述
我这里有一段简单的代码
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [number, setNumber] = useState(0);
function chaneNumber() {
setNumber(state => state + 1);
}
console.log("here");
return (
<div className="App">
<button onClick={chaneNumber}>Change number</button>
{number}
</div>
);
}
每次单击该按钮时,我的控制台中都会显示 2 个日志,表明该组件会呈现两次。我发现一篇帖子说这是关于严格模式的,但我没有启用严格模式。为什么这个组件在每次状态更新时渲染两次?
这是一个codeandbox链接来尝试一下。
解决方案
您的 App 组件在React.StrictMode
其中呈现,这导致您的代码在严格模式下运行,在严格模式下,控制台显示两次,因为每个函数在开发模式下运行两次
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
根据反应文档:
严格模式不能自动为您检测副作用,但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下函数来完成的:
- 类组件构造函数、render 和 shouldComponentUpdate 方法
- 类组件静态 getDerivedStateFromProps 方法
- 功能组件体
- 状态更新函数(setState 的第一个参数)
- 传递给 useState、useMemo 或 useReducer 的函数
推荐阅读
- amazon-web-services - 如何在terraform中使模块依赖于另一个模块
- python - KeyError:'请求的级别(日期)与索引名称不匹配(无)'
- java - Jelastic 云 Java Web 应用程序
- c++ - OpenCV VideoCapture 无法使用 FFMPEG 打开网络摄像头
- javascript - Angular 如何确保用户输入不是恶意的?
- angular - 在 Angular 中导入模块并从 Scully 获取错误
- discord.py - 为提醒命令添加限制 | 不和谐.py
- java - 在 Android Studio 中制作 3 x 3 按钮
- amazon-web-services - 负载均衡器可以用作 Web 服务器而不是 nginx 用于仅 API 的烧瓶应用程序吗?
- winapi - 应用程序结束时Windows UIAutomation“调用的对象已与其客户端断开连接”?