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吗？这只是意味着react的内部机制调用了两次渲染……您不必理会它。必要时甚至可以叫十次

组件渲染两次（reactJS）

2 个答案: