为什么我的（超级简单的）React 组件最初总是渲染两次？答案

【问题标题】：Why is my (super simple) React component initially always rendered twice?为什么我的（超级简单的）React 组件最初总是渲染两次？
【发布时间】：2022-07-20 16:36:49
【问题描述】：

我正在一个更大的 React 项目的上下文中研究一些优化算法。在测试一些东西时，我遇到了 React 的以下行为：即使是最简单的 React 组件，最初总是会渲染两次。我想知道为什么。

这是演示此行为的源代码：

App.tsx

import React from 'react';
import './App.css';
import Test1 from './components/Test1';

function App() {
  return <Test1 />;
}

export default App;

Test1.tsx

import React, { useEffect, useRef } from 'react';

const Test1 = () => {
  // useRef hooks
  const counter: React.MutableRefObject<number> = useRef<number>(0);

  // useEffect hooks
  useEffect(() => {
    counter.current++;
    console.log(counter.current.toString());
  }, []);

  return <div>Test1</div>;
};

export default Test1;

counter.current 最初总是增加到 2。

【问题讨论】：

“渲染两次”是什么意思？ DOM 中有两个元素还是两个 console.log？
你使用的是 React 严格模式吗？如果是这样，这是 React 的严格模式的预期行为 - reactjs.org/docs/strict-mode.html 。更多详细信息可以在 React v18 的博客文章中找到：reactjs.org/blog/2022/03/29/react-v18.html
可能是因为开发中的严格模式。 Check this
回答第一个问题：是的，我总是得到两个“console.logs”。
所以，我猜@widepeepohappy 的意义是什么，它不会“渲染两次”，只渲染一次然后重新渲染，在这种情况下这是需要的 :)

标签： reactjs

【解决方案1】：

非常感谢那些评论超级迅速并指出这是 React 的“严格模式”的预期行为的人！

我可以确认这是我问题的正确答案。

我刚刚运行了一个不再显示此行为的生产版本。我只得到一个“console.log”，计数器只增加一次。

【讨论】：

【解决方案2】：

这是因为React.StrictMode。更新 Ref 会强制组件重新渲染。请参阅React Hooks: useEffect() is called twice even if an empty array is used as an argument 了解更多信息。

【讨论】：