reactjs - React Hooks useState 与 Object 不一致

Question

我有这段代码。

import React, { useState, useEffect } from 'react';
export default function Example() {
const [object, setObject] = useState({
    count: 0
});

const onClick = () => {
    setObject(old => {
        old.count = old.count + 1;
        return old;
    });
};

return (
    <div>
        <p>You clicked {object.count} times</p>
        <button onClick={e => console.log(object.count)}>Show in log</button>
        <button onClick={onClick}>Click me</button>
    </div>
);
}

如果点击“Click me”，会增加对象的计数属性。但是由于某些原因，如果您单击它，对象仍然会更新，但组件不会重新渲染。您可以使用“在日志中显示”按钮检查对象的值。

根据 reactjs.org，无论何时设置组件的状态，它都会重新渲染。但是如果你这样写，它就不会。

但是如果我将 onClick 函数更改为

const onClick = () => {
    setObject(oldObject => {
        const newObject = { ...oldObject };
        newObject.count = oldObject.count + 1;
        return newObject;
    });
};

然后它将重新渲染组件。

谁能解释一下是什么导致了这种奇怪的行为？

Answer 1

之所以会这样，是因为 React 使用了 Object.is comparison algorithm。 .

如果您将 State Hook 更新为与当前状态相同的值，React 将在不渲染子项或触发效果的情况下退出。