Javascript 在 ReactJS 中使用 useState 时 [...arr, addThis Element] 和 array.push(addThis Element) 有什么区别

发布于04月20日

有人能解释一下这两者之间的区别吗:

const arr = users;

arr.push({ firstName, email })

setUsers((prevState) => arr)

这是:

setUsers(prevState => [...prevState, { firstName, email }])

推荐答案

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

Array.prototype.push()使数组原地变异，这意味着其对象引用不会更改.

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

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

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"
  }
]);

实用课程推荐