Angular Academy · 课时

以不可变方式更新状态

Q: 「以不可变方式更新状态」这节课中我会学到什么？

以不可变方式更新信号状态 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

以不可变方式更新信号状态

以不可变方式更新状态 是 CoddyKit 上的免费 Angular Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

为什么需要不可变性

信号通过引用检测变化。如果您原地修改数组或对象，引用保持不变，依赖它的 computed() 信号可能不会重新计算。请始终创建一个新引用。

修改陷阱

向现有数组中推入元素会修改数组，却不会改变引用。请避免这种做法。

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

使用展开运算符处理数组

使用展开运算符创建新数组，使引用发生变化并触发使用者重新运行。

// GOOD: new array reference
this._items.update(list => [...list, item]);

移除项目

使用 filter()，它会返回一个全新的数组，同时保持原数组不变。

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

更新单个项目

使用 map() 返回新数组，并将匹配的对象展开到一个全新的副本中，从而让内部引用也发生变化。

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

使用展开运算符处理对象

对于对象状态，请展开之前的对象，并覆盖发生变化的字段。嵌套对象也需要单独展开。

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

使用新值调用 set

完全替换状态时，使用新对象调用 set() 就自然符合不可变性，因为您提供了一个新引用。

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

为什么 computed 依赖它

由于计算得到的读取模型依赖信号的引用，不可变更新可以保证它们重新计算。保持数组引用不变的修改可能会让总额和筛选结果悄无声息地停留在过期状态。

辅助函数模式

为常见转换提取小型纯辅助函数，使存储方法更易读且保持一致。

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

谨慎处理深层嵌套

深层嵌套的状态意味着需要进行大量展开操作。如果更新过程变得繁琐，请扁平化状态结构，或将其拆分为多个信号，让每次更新只涉及较小的一部分状态。

不可变性有助于调试

由于每次更新都会生成一个新引用，您可以比较一段时间内的快照，记录更新前后的状态，并分析状态变化，而不必担心隐藏的原地修改。

快速检查

检验您对不可变信号更新的掌握程度。

回顾

您学习了不可变更新模式：数组和对象使用展开运算符，编辑和移除使用 map/filter，通过 set 创建新引用，以及为什么引用相等性使不可变性成为实现正确响应式更新的关键。

常见问题解答

「以不可变方式更新状态」课时是免费的吗？

是的 — 「以不可变方式更新状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「以不可变方式更新状态」这节课中我会学到什么？

以不可变方式更新信号状态你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「以不可变方式更新状态」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy