Question

这里in this example我只是用初始化函数调用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而引起的。

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

来自docs：

严格模式无法自动为您检测副作用，但可以通过使其更具确定性来帮助您发现它们。这是通过有意重复调用以下功能来完成的：

类组件的构造函数，呈现器和shouldComponentUpdate方法类组件的静态getDerivedStateFromProps方法功能组件主体状态更新器功能（setState的第一个参数）传递给useState，useMemo或useReducer的函数

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

重新调用钩子useState（初始化函数）两次，即使根本不更改数据吗？

1 个答案: