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

来自反应docs：

如果将状态挂钩更新为与当前状态相同的值，   React将纾困而不会渲染子代或发射效果。   （React使用Object.is比较算法。）

请注意，React可能仍需要再次渲染该特定组件   不用担心，因为React不会   不必要地“深入”到树上。如果您做的很昂贵   渲染时进行计算，您可以使用useMemo优化它们。

因此，每次以相同状态调用setState时，组件都不会重新呈现。它只会重新渲染2次，然后退出。这就是反应的工作方式，除非您要在render方法中进行大量计算，否则不必担心。

Answer 2

state的值是否已经与您尝试更新的值相同。事实是，setState()会重新渲染您的组件，无论如何，这就是React确保所有更改（如果有）都反映在UI中的作用。

如果要避免不必要的重新渲染，请在更新状态之前使用中介函数检查状态值是否已经相等。

import React, {useState} from 'react';

const TestHooks = () => {
    const [state, setState] = useState(true);

    const updateState = (boolean) => {
       if(boolean !== state){
          setState(boolean)
       }
    }

    console.log("rendering..", state);
    return(
        <div>
            <h1>{state.toString()}</h1>

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

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

export default TestHooks;

Answer 3

每当调用render()时，都会调用

setState()。这就是我们在React中拥有PureComponent概念的原因。阅读https://reactjs.org/docs/react-api.html#reactpurecomponent

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

3 个答案: