javascript - 在 ReactJS 中使用 useState 时 [...arr, addThisElement] 和 arr.push(addThisElement) 有什么区别？

Question

谁能解释一下这两者的区别:

const arr = users;

arr.push({ firstName, email })

setUsers((prevState) => arr)

还有这个:

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

Answer 1

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

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

If you return the same value from a Reducer Hook as the current state, React will bail out without rendering the children or firing effects. (React uses the 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"
  }
]);