为什么在调用 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

来自 react 文档：

如果将状态挂钩更新为与当前状态相同的值， React 将在不渲染子项或触发效果的情况下进行救助。 (React 使用 Object.is 比较算法。

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

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

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

每当调用setState()时都会调用render()。这就是为什么我们在 React 中拥有PureComponent概念的原因。阅读 https://reactjs.org/docs/react-api.html#reactpurecomponent