为什么我需要在函数中使用数组解构来重新渲染组件?

Question

在函数setBit中，我使用数组解构，位被更新，组件被重新渲染

function App() {
const [bits, setBit] = useState([0, 0, 0, 0, 0]);
const changeBit = index => {
setBit(prevState => {
prevState[index] = 1;
return ([...prevState])
});
};
useEffect(() => console.log(bits));
return (
<div className="container">
<div className="app">
<ul>
{bits.map((bit, index) => {
return <li onClick={() => changeBit(index)}>{bit}</li>;
})}
</ul>
</div>
</div>
);
}

但是当我返回 prevState 而没有像那样的数组解构时

const changeBit = index => {
setBit(prevState => {
prevState[index] = 1;
return (prevState);
});
};

位已更新，但组件不会重新设置。

prevState 和 [...上一页状态]？

这是代码沙箱的链接

Answer 1

这是因为您返回相同的对象(到 React(以更新状态(即 prevState( - 您已经改变了对象 - 这不会导致重新渲染。如果解构数组 [...prevState] 这是一个新对象，会导致重新渲染。

Answer 2

在javascript中

let stringA = ‘some string’
let stringB = ‘some string’

stringA === stringB将返回true，因为字符串A和字符串B具有相同的值并引用相同的原语。

但这与对象不同

let stringA = new String(‘abc’)
let stringB = new String(‘abc’)

现在stringA === stringB将返回false，因为尽管值相等，但在内存中创建了两个不同的对象，因此它们都引用了两个不同的对象，因此此比较在引用比较中失败。

在您的情况下，prevState不等于[...prevState]因为它在内存中创建一个新对象，并且根据 React 功能，它会将此视为新状态，后来导致组件重新渲染