reactjs - 为什么 useState 导致 dom 渲染两次

Question

我有一个简单的 hello-world 示例可以试用 useState钩;但是当我在控制台输出测试信息时，我发现每当我启用 useState控制台记录两倍的信息。

见 example在 CodeSandbox 中(调试信息显示在控制台中)。

Answer 1

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

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

当您更新组件挂载状态时，React将再次执行函数体，然后使用更新的值记录状态。

As you are using the React.StrictMode it can render the component more than once. That is the reason you see the console logs multiple times.

The commit phase is usually very fast, but rendering can be slow. For this reason, the upcoming concurrent mode (which is not enabled by default yet) breaks the rendering work into pieces, pausing and resuming the work to avoid blocking the browser. This means that React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption). Render phase lifecycles include the following class component methods:

1. constructor
   2. componentWillMount (or UNSAFE_componentWillMount)
   3. componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
   4. componentWillUpdate (or UNSAFE_componentWillUpdate)
   5. getDerivedStateFromProps
   6. shouldComponentUpdate render
   7. setState updater functions (the first argument)

Because the above methods might be called more than once, it’s important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. Unfortunately, it can be difficult to detect these problems as they can often be non-deterministic.

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