Reactjs 为什么useState会导致dom呈现两次

我有一个简单的hello world示例来尝试

useState

hook；然而，当我在控制台中输出测试信息时，我发现每当我启用

useState

时，控制台都会记录两次该信息

---

请参见CodeSandbox中的（调试信息显示在控制台中）。

useEffect异步运行，因此在开始时，首先，react将组件作为其正常行为进行渲染，然后useEffect运行，正如我们所知，每个设置状态都将导致组件重新渲染，这是第二次，这就是为什么您两次看到它的日志

您的index.js具有带有React.StrictMode的应用程序组件包装器

---

这就是它的原因。

console语句位于函数体中，

React

将在每次渲染时执行函数体

在组件装载时，由于init状态为空，控制台将打印一个空字符串

在更新组件安装状态时，

React

将再次执行函数体，然后用更新后的值记录状态 使用

React.StrictMode

时，它可以多次渲染组件。这就是您多次看到控制台日志的原因

提交阶段通常非常快，但渲染可能很慢。因此，即将到来的并发模式（默认情况下尚未启用）会将渲染工作分成多个部分，暂停并继续工作以避免阻塞浏览器。这意味着React可以在提交之前多次调用呈现阶段生命周期，也可以在根本不提交的情况下调用它们（由于错误或更高优先级的中断）。 呈现阶段生命周期包括以下类组件方法：

建造师

组件将安装（或不安全的组件将安装）

组件将接收道具（或不安全组件将接收道具）

componentWillUpdate（或不安全的\u componentWillUpdate）

getDerivedStateFromProps

是否应更新渲染组件

setState更新程序函数（第一个参数）

因为上述方法可能会被多次调用，所以它们不包含副作用非常重要。忽略此规则可能会导致各种问题，包括内存泄漏和无效的应用程序状态。不幸的是，很难检测到这些问题，因为它们通常是不确定的

---

您可以阅读更多关于React.StrictMode的信息

谢谢您的详细解释：）