Question

设置当前值触发的状态是否会对重新渲染做出反应？

我是否应该在设置之前将新值与当前值进行比较？

const [value, setValue] = useState(123);

/*.....*/

const newValue = whatever();

/* do not trigger render if the value still the same */
if (newValue !== value) setValue(newValue); // like this
// or
setValue(newValue); // or just simply like this

Answer 1

React 很聪明，会在重新渲染前检查比较值。

<块引用>

如果您的更新函数返回与当前状态完全相同的值，则将完全跳过后续的重新渲染。

有关详细信息，请参阅他们的 this section 份文档

一个重要的警告是，因为它使用 Object.is() method 进行相等性检查，所以它就像您对字符串或数字这样的简单变量所期望的那样，如果值相等则跳过，但对于对象（{ {1}})，它不检查值，而只检查对对象的引用是否相同。这意味着两个相同的对象将被视为不相等，并导致重新渲染，而如果您更改对象的内容但整个对象相同，则它将被视为相等而不重新渲染。

Answer 2

通过使用：

const [value, setValue] = useState(123)

以及稍后在您的代码中：

setValue(123)

它不会重新渲染。

但如果你改用：

const [value, setValue] = useState({myCoolNumber: 123});

以及稍后在您的代码中：

setValue({myCoolNumber: 123})

在这种情况下，它会重新渲染，因为您将一个对象传递给函数 setValue，而该对象与您第一次传递给 useState 的对象是不同的引用。

反应钩子设置状态

2 个答案: