即使根本不改变数据，Reack hook useState（初始化函数）调用了两次？

Question

在此示例中，我只是useState使用初始化函数进行调用：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [data, setData] = useState(() => {
    console.log('Getting initial state...');

    return {};
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

从控制台可以看到，useState函数被调用了两次。这是正常现象，有什么原因吗？

Answer 1

这是由Strict Mode包裹你的App.

\n

在严格模式下，React 会故意运行一些生命周期方法两次以帮助检测错误。

\n

来自文档：

\n

\n

严格模式可以\xe2\x80\x99t自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现它们。这是通过有意两次调用以下函数来完成的：

\n

\n

\n

类组件构造函数、render 和 ShouldComponentUpdate 方法\n类组件静态 getDerivedStateFromProps 方法\n函数组件主体\n状态更新器函数(setState 的第一个参数)\n传递给 useState、useMemo 或 useReducer 的函数

\n

\n

\n

注意：\n这仅适用于开发模式。在生产模式下，生命周期不会被重复调用。

\n

\n