[译] Signal 决策图

In Angular v16, signals were introduced as a new reactive primitive to enhance state management and streamline change detection. Signals are functions that hold a value and emit updates when that value changes, enabling fine-grained reactivity without relying on manual subscriptions or complex observables.

Signal decision chart

What is the right tool for my use case?

With this solid foundation laid out with signal(), computed() and effect, additional primitives were introduced in the following minor/major versions.

Amongst other we have today:

• input(), for inputs
• Signal Queries (viewChild(), viewChildren, contentChild(), contentChildren())
• model() for double binding
• linkedSignal
• resource/rxResource
• afterRenderEffect()

Each of those primitives provided by the framework addresses specific use cases. It can become difficult to determine which is the exact tool you are looking for.

Here is a chart that might help you determine what is the tool that you are looking for.

As you can see, this chart assumes that you already know when to reach out for Signals and when/what observable is better suited.

Note: I’ll try to keep this chart up-to-date with new primitives that might be around the corner or when new use cases arise.

原文地址: http://riegler.fr/blog/2025-01-12-signal-decision-chart

Signal 决策图

针对你的使用场景，什么才是合适的工具？

Matthieu Riegler - 2025 年 1 月 12 日

在 Angular v16 中，Signal 作为一种新的响应式原语被引入，用于增强状态管理并简化变更检测。Signal 是持有值的函数，当值发生变化时会发出更新通知，从而实现细粒度的响应式能力，而无需依赖手动订阅或复杂的 Observable。

在 signal()、computed() 和 effect 这些坚实的基础之上，后续的次要/主要版本中又引入了额外的原语。

目前我们拥有的包括：

• input()，用于输入
• Signal 查询（viewChild()、viewChildren、contentChild()、contentChildren()）
• model()，用于双向绑定
• linkedSignal
• resource/rxResource
• afterRenderEffect()

框架提供的每一个原语都针对特定的使用场景。要确定哪个才是你需要的确切工具，可能会变得很困难。

下面这张图表或许可以帮助你确定你正在寻找的工具。

如你所见，这张图表假设你已经知道何时该使用 Signal，以及何时使用 Observable 更为合适。

注意：我会尽量让这张图表保持更新，纳入即将到来的新原语，或者在出现新的使用场景时进行更新。