为什么useState会导致dom渲染两次

Question

我有一个简单的 hello-world 示例来尝试useStatehook；然而，当我在控制台中输出测试信息时，我发现每当我启用useState控制台时，都会记录两倍的信息。

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

Answer 1

控制台语句位于函数体中，React将在每次渲染时执行函数体。

\n\n

\n
1. 在组件挂载时，由于init状态为空，控制台将打印一个空字符串。
\n
2. 当您更新组件 Mount 上的状态时，React将再次执行函数体，然后使用更新后的值记录状态。
\n

\n\n

\n

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

\n\n

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

\n\n

\n
1. 构造函数\n\n
   \n
   2. componentWillMount（或 UNSAFE_componentWillMount）
   \n
   3. componentWillReceiveProps（或 UNSAFE_componentWillReceiveProps）
   \n
   4. componentWillUpdate（或 UNSAFE_componentWillUpdate）
   \n
   5. 从Props获取DerivedState
   \n
   6. shouldComponentUpdate 渲染
   \n
   7. setState 更新器函数（第一个参数）
   \n
\n

\n\n

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

\n

\n\n

您可以React.StrictMode 在这里阅读更多相关内容

\n