組件渲染兩次（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 次