为什么我的React组件在控制台多次渲染?

Question

我是react的新手。我创建了两个文件App.js和UseEffect.js我正在学习生命周期与功能的反应。当我在控制台看到时，那是多次渲染。你可以在下面看到我的照片。

My Console In Browser

这是我的代码

UseEffect.js

import React, {useState, useEffect} from "react";
function MyFunction(){
console.log('-> Function Init')
const [count, setCount] = useState(0)
const handleCount = () => {
setCount(prevState => {
return prevState+1
})
}
//LifeCycle
useEffect(() => {
console.log('my first effect')
})
console.log(`-> Start Render (${count})`)
return(
<div>
<h1>Function Component</h1>
<p>
<button onClick={handleCount}>Count</button>
{count}
</p>
</div>
)}
export default MyFunction

App.Js

import './App.css';
import UseEffect from './components/UseEffect'
function App() {
return (
<div className="App">
<UseEffect />
</div>
);
}
export default App;

它是如何工作的?我想要。它只是渲染一次。

Answer 1

您的useEffect调用缺少依赖数组。当你希望它只在初始渲染时运行时，你需要传递一个空数组作为它的依赖项。

useEffect(() => {
console.log('my first effect')
}, [])

详情请参见问题。

Answer 2

为什么显示两次:

这是StrictMode的一个有意的特性。这只发生在发展,有助于发现意外副作用放入呈现阶段。我们只对带有Hooks的组件这样做，因为它们更有可能在错误的地方意外地产生副作用。

-gaearon

TLDR:这是一个功能，而不是一个bug。