🙋🏻♀️ 编者按：本文作者是蚂蚁集团前端工程师新罗，介绍了响应式状态管理的一些理念和方法，希望能够给大家带来一些参考。
什么是 Signals？
我们先从 Preact 作者 Jason Miller 发布的一篇文章说起
Preact 引入了 Signals，提供了快速的响应式状态原语（或者叫原子吧），那么 Signals 有以下几点：
- 感觉上像是使用原始数据结构
- 能根据值的变化自动更新
- 直接更新 DOM （换句话来说无 VDOM）
- 没有依赖数组
贴一下 Signals 的用法：
import { signal } from "@preact/signals";
const count = signal(0);
function Counter() {
const value = count.value;
const increment = () => {
count.value++;
}
return (
<div>
<p>Count: {value}</p>
<button onClick={increment}>click me</button>
</div>
);
}
可以看到，跟 SolidJS 的 createSignal非常相似，而且两者有很多共同点（下面再说），另外通过.value访问属性非常类似于 Vue 中的 Ref。Signals 可以在一个应用从小到大，在越来越复杂的逻辑迭代后，依然能保证性能。Singals 提供了细粒度状态管理的好处，而无需通过 memorize 或者其他 tricks 方式去优化，Signals 跳过了数据在组件树中的传递，而是直接更新所引用的组件。这样开发者就能降低使用心智，保证性能最佳。
下面是 hooks state 作为原子和 Signals 的性能比对：
能达到如此表现，Signals 有以下几点：
- 默认惰性求值（lazy evaluate）- 只有被使用到的才会被监听和更新
- 最佳更新策略
- 最佳依赖追踪策略 - 不像 hooks 需要指定依赖
- 直接访问状态值，不需要 selector 或其他 hooks
另外从上面可以看出 Signals 是可以独立于组件外的，跟 hooks 方式不一样
那么是不是 Signals 既可以服务于 Preact，也能集合到其他框架中呢？从 Signals 目标中，我们看到了这点:
而且目前，Signals 可以单独品尝使用，不用依附 UI 框架。
比如：codesandbox.io/s/tender-bu…
其他框架
我们把目光切换到 SolidJS ，先看一下 SolidJS 响应式数据例子：
import { createSignal, onCleanup } from "solid-js";
import { render } from "solid-js/web";
const App = () => {
const [count, setCount] = createSignal(0);
const timer = setInterval(() => setCount(count() + 1), 1000);
onCleanup(() => clearInterval(timer));
return <div>{count()}</div>;
};
render(() => <App />, document.getElementById("app"));
可以看到 SolidJS 响应式也是也 Signal 作为基础，createSignal 既可以用于组件内，也可以用于组件外，这个跟 Preact 中类似。一方面可以将 Signal 作为组件的 local state，也可以定义为 global State。与前面类似，SolidJS 中也有以下相似点：
- 响应式细粒度更新
- 无需定义 dependencies
- 惰性取值
SolidJS 与 Mobx 和 Vue 的响应式非常相似，但是不会处理 VDOM，而是直接更新 DOM。所以 SolidJS 的性能表现也比较不错：
这里不再介绍 Vue 的响应式，有兴趣的可以再去了解下
响应式状态管理三要素
信号: Signals
这里其实很难翻译，一个基础响应式数据怎么命名，这里用 Signals 先代替，当然我们有可能会看到比较叫：Observables(Mobx等)，Atoms(Recoil,Jotai等)，Refs(Vue等)。不过基本意思都一样，表示一个响应式数据的单元。
const [count, setCount] = createSignal(0);
console.log(count()); //0
setCount(5);
console.log(count()); //5
这里取值用的是 function，有些地方用的是 .value，意味着也可以通过 Object 的 getter, setter 或者 Proxy 去进行数据处理
反应: Reactions
反应这里很好理解，大部分地方叫 Effect ，也就是副作用，当然也有用 actions 的，下方是一个基本例子：
const [count, setCount] = createSignal(0);
createEffect(() => console.log("The count is", count()));
setCount(5);
反应也就是在数据更新时的监听器，作为响应式数据的基础，也是必不可少的一环
衍生: Derivations
这里是指数据的衍生状态，本质上也可以认为是 Signals 的变种，常见命令可能有 computed, memo 等。
const [firstName, setFirstName] = createSignal("John");
const [lastName, setLastName] = createSignal("Smith");
const fullName = createMemo(() => {
return `${firstName()} ${lastName()}`
});
console.log(fullName);
衍生能缓存计算结果，避免重复的计算，并且也能自动追踪依赖以及同步更新。
响应式特点
响应式数据管理会存储不同节点之间的链接关系，当每次节点更新之后，会重新检查链接关系。如果不在关联，就会解绑链接，取消依赖。
下方的例子更能体现：
const [firstName, setFirstName] = createSignal("a");
const [lastName, setLastName] = createSignal("b");
const [showFullName, setShowFullName] = createSignal(true);
const displayName = createMemo(() => {
if (!showFullName()) return firstName();
return `${firstName()} ${lastName()}`
});
createEffect(() => console.log("名称：", displayName()));
// a b
setShowFullName(false);
// a
setLastName("c");
// nothging change
setShowFullName(true);
// a c
运行效果可见：codesandbox.io/s/tender-bu…
另外响应式还有一点就是同步更新，同步更新避免了状态不一致的问题（相信使用React的同学深有感受），也提高了更好的预测性和可测试性。在响应式数据更新的基础上，有些也会加入比如批量更新，批量更新在避免重复执行反应和衍生上大有好处，大大避免了一些多余额外的执行消耗
手动实现一个
响应式状态管理核心还是用的观察者模式，当 Signals 更新时，Reactions 会订阅到数据变化从而更新数据。
Signals
首先实现一个基础的数据更新与读取
const createSignal = (value) => {
const setter = (newValue) => value = newValue;
return [() => value, setter]
}
const [name, setName] = createSignal('a')
console.log(name());
setName('b')
console.log(name());
输出结果：
加上订阅逻辑，重新更改下：
// context 包含Reactions中的执行方法和Signal依赖
const context = [];
const createSignal = (value) => {
const subscriptions = new Set();
const readFn = () => {
const running = context.pop();
if (running) {
subscriptions.add({
execute: running.execute
});
running.deps.add(subscriptions);
}
return value;
};
const writeFn = (newValue) => {
value = newValue;
for (const sub of [...subscriptions]) {
sub.execute();
}
};
return [readFn, writeFn];
};
const [name, setName] = createSignal("a");
console.log(name());
setName("b");
console.log(name());
从上述可以看到，在读取的时候会获取当前执行的上下文，拿到 Reactions 的方法，并且方法依赖里增加当前Signals，这样 Reactions 就能订阅到这个 Signals，当 Signals 更新时，会执行所包含的订阅方法。接下来我们把 Reactions 补充下
Reactions
废话不多说，直接看代码
const createEffect = (fn) => {
const execute = () => {
context.push(running);
fn();
context.pop(running);
}
const running = {
execute,
deps: new Set()
}
execute();
}
const [name, setName] = createSignal("a");
createEffect(() => console.log(name()))
setName("b");
但是这里有个问题就是，随着 Reactions 每次执行，running 的 deps 会逐步累加，所以需要在执行前，清空deps。
const createEffect = (fn) => {
const execute = () => {
running.deps.clear();
context.push(running);
try {
fn();
} finally {
context.pop(running);
}
};
const running = {
execute,
deps: new Set()
};
execute();
};
这样 Reactions 也就 OK 了
Derivations
那么 Derivations 的代码就简单多了
const createMemo = (fn) => {
const [memo, setMemo] = createSignal();
createEffect(() => setMemo(fn()));
return memo;
}
其实也很好理解，如前面所说，衍生是一种特殊的 Signals，所以直接返回 Signal，另外 Reactions 是可以追踪订阅到 Signals 的变化，所以在 Reactions 函数里设置 Derivations 的值就可以了。
完整 Demo 见：codesandbox.io/s/elastic-b…
通过短短不到 100 行的代码就能实现一个基础的细粒度更新的状态管理（当然我们这里用的是方法去取值，也可以用 proxy 等方式，例如 valtio 等），但是仅仅这些到了实际应用和跟 UI 框架融合还是不够的，需要有更多的完善和补充。如何将响应式代码融入到渲染过程，可以参考这篇文章。也可以看看 Signals 是如何从实际代码上融入到 Preact 与 React 中的。
回到 React
让我们把目光回到 React 上，从目前来看，React 的状态管理有很多，可以见云谦老师的这个文章，不同的框架对比如下：
这样看来 valtio 更符合 Signals 在 React中的实现
- 无需 dependency
- 外部 store，无需关联组件
但是作为 React 相关的框架，最后都会去做 VDOM 更新，跟 SolidJS 直接更新不一样，当然我们也期望 React 官方能做一些改变去优化现有的开发体验，比如： React Forget/ useEvent
最后
这篇文章并不是想指导如何做状态管理的选型，也不是去分析不同状态管理的优劣。只是介绍响应式状态管理的一些理念和方法，希望能对大家有一些价值参考。
