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

【问题标题】：Why is my component rendering when useState is called with the same state?为什么使用相同状态调用 useState 时我的组件会呈现？
【发布时间】：2019-09-09 08:47:43
【问题描述】：

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

它最初设置为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;

【问题讨论】：

请问你为什么要把它转换成字符串？
如果我通过未字符串化的状态，它不会呈现“true”/“false”。我想如果状态是字符串或数字，我不需要它。但是布尔值不起作用。

标签： reactjs react-hooks

【解决方案1】：

来自docs 的反应：

如果您将状态挂钩更新为与当前状态相同的值， React 将在不渲染子元素或触发效果的情况下退出。（React 使用 Object.is 比较算法。）

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

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

【讨论】：

谢谢！我注意到他们只是重新渲染两次，不确定为什么它会重新渲染两次而不是每次。也许这不是什么大问题，我不知道。我只是在玩，但重新渲染两次都不正确吗？您希望在生产应用程序中出现这种行为吗？（不必要的重新渲染）
是的，这就是 react 的工作原理，除非您在 render 方法中进行一些繁重的计算，否则这应该不是问题。在这种情况下，您需要记住计算reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations

【解决方案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;

【讨论】：

【解决方案3】：

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

【讨论】：