为什么useState导致dom渲染两次

Question

我有一个简单的hello-world示例来试用useState钩子；但是，当我在控制台中输出测试信息时，我发现无论何时启用useState，控制台都会记录两倍的信息。

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

Answer 1

console语句位于函数主体中，React将在每个渲染器上执行函数主体。

1. 在组件安装上，由于init状态为空，控制台将打印一个空字符串。
2. 在更新组件Mount上的状态时，React将再次执行功能主体，然后使用更新后的值记录该状态。

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

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

1. 构造函数
   1. componentWillMount（或UNSAFE_componentWillMount）
   2. componentWillReceiveProps（或UNSAFE_componentWillReceiveProps）
   3. componentWillUpdate（或UNSAFE_componentWillUpdate）
   4. getDerivedStateFromProps
   5. shouldComponentUpdate渲染
   6. setState更新程序功能（第一个参数）

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

您可以了解有关React.StrictMode here

的更多信息

Answer 2

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

这是造成它的原因。

Answer 3

useEffect异步运行，因此，首先，首先react将组件呈现为正常行为，然后useEffect运行，并且我们知道每个setState都会导致组件重新呈现，这是第二次了，这是为什么您看到它两次记录