使用 hooks 进行两次 React 渲染

为什么我的组件渲染两次？

export default function App() {
  console.log("asd");
  const [count, setCount] = useState(0);
  return (
    <div>
      <Title count={count} />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      />
    </div>
  );
}


//console= "asd" "asd"

它渲染了两次，但是如果我删除 useState 它就不会发生

您的应用程序可能由 React.StrictMode 包装。 StrictMode 是一个用于突出显示应用程序中潜在问题的工具。

StrictMode 目前可帮助：

识别生命周期不安全的组件

关于遗留字符串引用 API 使用的警告

关于已弃用的 findDOMNode 用法的警告

检测意外的副作用

检测旧版上下文 API

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

类组件构造函数、render 和 shouldComponentUpdate 方法

类组件静态 getDerivedStateFromProps 方法

功能组件主体（您的应用程序是功能组件）

状态更新函数（setState 的第一个参数）

传递给 useState、useMemo 或 useReducer 的函数

更多详情