React Component意外重新渲染

Question

仍在学习一些反应，并试图了解渲染过程......在当前的项目之前，我觉得我有一个不错的掌握。

import { useEffect, useState } from "react";
import BazaarPage from "./Components/BazaarPage";
import "./styles.css";

export default function App() {
  const [data, setData] = useState();

  useEffect(() => {
    async function getData() {
      fetch("https://api.slothpixel.me/api/skyblock/bazaar")
        .then((data) => data.json())
        .then((obj) => {
          setData(obj);
        });
    }
    getData();
  }, []);
  return <div className="App">{data && <BazaarPage data={data} />}</div>;
}

export default function BazaarPage({ data }) {
  console.log(data);
  return <div className="bazzar-page"></div>;
}

我希望这会 console.log 1 次...但它会渲染 4 次...我的想法是我的“BazaarPage”组件直到基于“数据”state data && <BazaarPage data={data} />有条件的。 我也理解“应用程序”组件应该呈现两次，一次是在页面的初始运行时，第二次是在我的 useEffect 中的setData中更新 state 时。

为什么这会记录 4 次数据，我的理解在哪里不正确？

Answer 1

StrictMode 渲染组件两次（在开发而不是生产上），以检测代码的任何问题并警告您（这可能非常有用）。

如果您在您的应用中启用了 StrictMode 但不记得启用它，这可能是因为您最初使用 create-react-app 或类似方法来创建您的应用，默认情况下会自动启用 StrictMode。

例如，您可能会发现您的 {app} 在 index.js 中被 <React.StrictMode> 包裹：

  ReactDOM.render(
     <React.StrictMode>
       {app}
     </React.StrictMode>,
    document.getElementById('root')
  );

如果是这样，您可以通过删除 <React.StrictMode> 标签来禁用 StrictMode：

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );

Answer 2

在 React 中，您通常不应该依赖（重新）渲染的数量作为经验法则。 想象一下它会被足够频繁地渲染，所以你应该保持你的组件没有副作用。 包括调用console.log ，这会导致副作用。 正如上面的评论已经正确建议的那样，将您的 React-Application 包装到React.StrinctMode会导致额外的重新渲染，以防止您依赖渲染的数量。

但是可能还有其他副作用，例如上下文包装您的应用程序并导致应用程序更新等等。

但是，您的逻辑不是问题，因为您在理论上是正确的