组件渲染两次（reactJS）答案

【问题标题】：Component render two times (reactJS)组件渲染两次（reactJS）
【发布时间】：2020-06-11 15:28:54
【问题描述】：

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

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

【问题讨论】：

请提供minimal reproducible example。具体来说，您需要尽可能简单地重新创建一个导致相同行为的新应用程序。这需要包含使用该组件的代码，以便我们可以看到它是如何呈现的。

标签： javascript reactjs react-router react-hooks

【解决方案1】：

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

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

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

【讨论】：

True ，在我的“index.js”中我已经定义了“React.StrictMode”，激活 StrictMode 重要吗？
很高兴拥有它，它可以帮助您发现一些可能不安全的东西。但有时您会遇到许多尚未遵循 StrictMode 的库的情况，并且警告太多。由你决定，但基本上有总比没有好！

【解决方案2】：

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

【讨论】：