🙋🏻‍♀️ 编者按：本文作者是蚂蚁集团前端工程师新罗，介绍了响应式状态管理的一些理念和方法，希望能够给大家带来一些参考。

  什么是 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 框架。比如：https://codesandbox.io/s/tender-burnell-7c7g9n?file=/src/index.js

  其他框架

我们把目光切换到 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

运行效果可见：https://codesandbox.io/s/tender-burnell-7c7g9n?file=/src/index.js

另外响应式还有一点就是同步更新，同步更新避免了状态不一致的问题（相信使用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 见：https://codesandbox.io/s/elastic-blackwell-br79m2?file=/src/index.js

通过短短不到 100 行的代码就能实现一个基础的细粒度更新的状态管理（当然我们这里用的是方法去取值，也可以用 proxy 等方式，例如 valtio 等），但是仅仅这些到了实际应用和跟 UI 框架融合还是不够的，需要有更多的完善和补充。如何将响应式代码融入到渲染过程，可以参考这篇文章（https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering）。也可以看看 Signals 是如何从实际代码上融入到 Preact 与 React 中的（https://github.com/preactjs/signals/tree/main/packages）。

  回到 React

让我们把目光回到 React 上，从目前来看，React 的状态管理有很多，可以见云谦老师的这个文章，不同的框架对比如下：

这样看来 valtio 更符合 Signals 在 React中的实现

• 无需 dependency
• 外部 store，无需关联组件

但是作为 React 相关的框架，最后都会去做 VDOM 更新，跟 SolidJS 直接更新不一样，当然我们也期望 React 官方能做一些改变去优化现有的开发体验，比如：React Forget/ useEvent

  最后

这篇文章并不是想指导如何做状态管理的选型，也不是去分析不同状态管理的优劣。只是介绍响应式状态管理的一些理念和方法，希望能对大家有一些价值参考。

  引用

1. https://preactjs.com/blog/introducing-signals

2. https://preactjs.com/guide/v10/signals/

3. https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf

4. https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering

5. https://cn.vuejs.org/guide/extras/reactivity-in-depth.html

6. https://my5353.com/gCocL

7. https://mp.weixin.qq.com/s/26_yYH5fbDyMTEKOMcNxtA
   

有点意思，那就点个关注呗 💁🏼‍♀️

👇🏾点击「阅读原文」，在评论区与我们互动噢