为什么 useState hook 会导致 React 中不必要的重新渲染周期?

Question

为什么只是这样定义状态：

const [flipCardDeg, changeFCDeg] = useState(0);

在正常的函数组件中导致额外的重新渲染周期？ 它不是 1 次重新渲染，而是重新渲染两次。

我知道如果在某个地方使用"changeFCDeg"来更改它应该重新渲染的状态，那没关系。但是为什么一开始，在初始化所有内容时，它会再次重新渲染一次？

我应该担心有 2 个重新渲染而不是一个，如果是，如何处理它？

Answer 1

React 在检测到更改时重新渲染。 您可以尝试通过准确指定它所感知的更改来控制它。 例如，像这样：

const getMoreData = false
const [flipCardDeg, changeFCDeg] = useState(0);
useEffect(() => {
console.log('say something once')
return () => {
console.log('why say it again?')
}
}, [getMoreData])  // will only run once unless getMoreData is changed