在ReactJS中使用useState时,[…arr,addThisElement]和arr.push(addThisElement)之间有什么区别?

答案是引用和对象相等。。。

Array.prototype.push() 在适当位置对数组进行变异,这意味着其对象引用不会更改。

const prevState = [1,2,3];
const nextState = prevState;
nextState.push(4);
nextState === prevState; // true

[...prevState, { firstName, email }] 创建一个不等于 prevState .

const prevState = [1,2,3];
const nextState = [...prevState, 4];
nextState === prevState; // false

根据React的状态变化检测规则。。。

Bailing out of a dispatch

如果从减速器挂钩返回与当前状态相同的值,React将退出,而不渲染子对象或激发效果。(React使用 Object.is comparison algorithm .)

使用 .push() 将状态更新为相同的值意味着React将退出重新渲染,您将看不到所做的更改。

users.push({
  firstName: "Bob",
  email: "bob@example.com"
});
setUsers(users);

创建一个新的数组,更改将可见

setUsers((prev) => [
  ...prev,
  {
    firstName: "Bob",
    email: "bob@example.com"
  }
]);

在第一种情况下,你改变了引用 arr 添加用户。在第二种情况下,创建一个全新的数组,复制旧数组中的所有数据,并添加新用户。

您应该使用第二种情况作为使用 Object.is ,如果你的第一个病例 true 因为即使添加了新用户,引用也没有更改,因此ui不会更新。