为什么我的(超级简单)React组件最初总是渲染两次?

Question

我正在研究一个更大的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。

Answer 1

这是因为React.StrictMode。更新Ref会强制组件重新渲染。参见React Hooks:即使使用空数组作为参数，也会调用两次useEffect()以获取更多信息。

Answer 2

非常感谢那些快速评论并指出这是React的"严格模式"所期望的行为的人!

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

我刚刚运行了一个不再显示此行为的生产构建。我只有一个"console。log"并且计数器只增加一次。