mutate+push 和 update+spread 有什么区别？

Question

假设您有一个用于项目数组的

Signal

，并且您想要向该数组添加新值。有两种方法可以实现：

// A: using mutate to mutate it in place and invoking the push method
items$.mutate(items => items.push(newItem))

// B: using update to create a new item with the spread operator
items$.update(items => [...items, item])

这两种方法之间是否存在需要考虑的实际差异？或者这一切都归结于语义、个人偏好和性能？

Answer 1

我想到的一个实际区别是，使用 mutate 时不能使用 OnPush 策略。

Answer 2

1-变异+推送：

• Mutate：当您调用 mutate 时，您通常直接使用现有状态。状态就地突变。
• push：push方法修改原数组。它将一个或多个元素添加到数组末尾并返回数组的新长度。
• 如果直接改变状态（如推送），Angular 可能无法检测到更改，因为对 cartItems 数组的引用没有更改。 Angular 的更改检测通常依赖于对象引用的更改来了解何时更新视图。如果不仔细管理，这可能会导致性能问题和不可预测的行为。

2-更新+传播：

• 更新：这通常意味着基于当前状态创建一个新状态。不直接修改原始状态；相反，会创建一个新版本的状态，然后用于替换旧版本。
• 扩展运算符（...）：该运算符用于通过扩展现有数组的元素来创建新数组。这意味着原始数组没有被修改。
• 通过使用带更新的扩展运算符，可以确保创建新数组并且状态不可变。当您用新状态替换旧状态时，Angular 会检测到对 items 数组的引用已更改，从而触发更改检测并相应地更新视图。

使用 update + spread 是处理此类更新的更“Angular 方式”，因为它符合框架的不变性和变更检测实践。不可变的更新（如更新+传播）有助于确保应用程序的行为可预测，并且更改检测按预期工作。它们在具有许多状态更改的复杂应用程序中尤其重要，其中不变性可以帮助避免与对象引用相关的细微错误。