Reack钩子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

这是由包装您的应用程序的严格模式造成的。

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

从文档中：

严格模式不能自动为您检测副作用，但它可以通过使副作用更具确定性来帮助您发现副作用。这是通过故意双重调用以下函数来实现的：

类组件构造函数、渲染和应该组件更新方法类组件静态getDerivedStateFromProps方法函数组件主体状态更新函数（setState的第一个参数）传递给useState、useMemo或useReucer的函数

注：这仅适用于开发模式。在生产模式下不会双重调用生命周期。