组件渲染两次（reactJS）

Question

我有一个 React 组件，当我编译它时它会渲染两次。 有什么想法？

import React, { useState } from "react";
export default () => {
  const [loaded, setLoaded] = useState(false);
  return (
    <>
      {console.log("test")}
      {alert("y")}
      <h2>Cargando</h2>
    </>
  );
}

Answer 1

您可能正在使用React.StrictMode ，对吧？

在这里阅读https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

它具有检测副作用的特殊机制，因此在开发模式下，某些组件将渲染 2 次而不是 1 次。 但它也可能在生产中无意中发生，但你真的不应该关心渲染发生了多少次。

Answer 2

你怎么知道它渲染了两次？ 因为console.log？ 它只是意味着反应调用渲染的内部机制两次......你不应该关心它。 必要时甚至可以调用 10 次