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

Question

我有一个带有 bool 状态的简单功能组件。以及用于更改状态的按钮。

它最初设置为true，因此当我按下true按钮时，它不会渲染。

但是如果我按下 false 按钮​​，它会重新渲染，并且如果我再次按下 false 按钮​​，即使状态已经设置为 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

来自 react docs :

If you update a State Hook to the same value as the current state,React will bail out without rendering the children or firing effects.(React uses the Object.is comparison algorithm.)

Note that React may still need to render that specific component againbefore bailing out. That shouldn’t be a concern because React won’tunnecessarily go “deeper” into the tree. If you’re doing expensivecalculations while rendering, you can optimize them with useMemo.

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