为什么在使用相同状态调用 useState 时我的组件会呈现？

Question

我有一个带有布尔状态的简单功能组件。和按钮来改变状态。

它最初设置为true所以当我按下 true 按钮时，它不会呈现。

但是如果我按下假按钮，它会重新渲染，如果我再次按下假按钮，它会重新渲染，即使状态已经设置为false..

有人可以解释为什么当状态更改为完全相同的状态时组件会重新渲染吗？如何防止它重新渲染？

import React, {useState} from 'react';

const TestHooks = () => {
    const [state, setState] = useState(true);
    console.log("rendering..", state);
    return(
        <div>
            <h1>{state.toString()}</h1>

            <button onClick={() => setState(true)}>true</button>

            <button onClick={() => setState(false)}>false</button>
        </div>
    )
}

export default TestHooks;

Answer 1

从反应文档：

如果您将 State Hook 更新为与当前状态相同的值，React 将退出而不渲染子项或触发效果。（React 使用 Object.is 比较算法。）

请注意，在退出之前，React 可能仍需要再次渲染该特定组件。这不应该是一个问题，因为 React 不会不必要地“深入”到树中。如果您在渲染时进行昂贵的计算，您可以使用 useMemo 优化它们。

因此，您的组件不会在每次setState以相同状态调用时重新渲染。它只会重新渲染 2 次，然后退出。这就是 react 的工作原理，除非您在 render 方法中进行一些繁重的计算，否则这应该不是问题。