组件渲染两次(反应JS)

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 次而不是一次。但它也可能无意中发生在生产中，但你真的不应该关心渲染发生了多少次。

Answer 2

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