谈谈我对 Reacitive 方法的理解

本文我想和大家分享一下我对当前 Reactivity 方法和现状的理解。我并不是说我的观点就是对的，但我认为，正是通过分享自己的观点，我们才能对行业中的事物达成共识，我希望这些来之不易的见解能够对其他人有所帮助，并补充他们理解中缺失的部分。

reacitve 三剑客

我认为到目前为止，我们在行业中看到的 reacitive 方法有三种:

基于 value：也就是脏检查，应用的框架有 Angular, React, Svelte；
基于 observable : 应用的框架有 Angular with RxJS, Svelte；
基于 singnal:应用的框架有 Angular with signals, Qwik, React with MobX, Solid, Vue

接下来我来谈谈这三种方法：

基于 value

基于 value 的系统依赖于将状态作为简单值存储在“不可观察”引用中。

当我说“observable” 时，我并不是指的是像 RxJS 这样的可观察对象。我指的是“可观察”这个词的常用用法，比如知道它什么时候发生了变化。“不可观察”意味着当值发生变化时，没有办法及时知道具体的实例。下面我给出三个例子：

React

function Counter() {const [count, setCount] = useState(0)return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Angular

import { Component } from '@angular/core';@Component({selector: 'app-counter',template: `<h1>Counter: {{ count }}</h1><button (click)="increment()">Increment</button>`,
})
export class CounterComponent {count: number = 0;increment() {this.count++;}
}

Svelte

<script>let count = 0;function increment() {count += 1;}
</script><div><h1>Counter: {count}</h1><button on:click={increment}>Increment</button>
</div>

在上面的每种情况下，状态都作为一个值存储在变量中。但关键是它是一个不可观察的值，以一种不允许框架知道(观察)值何时变化的方式存储在 JavaScript 中。

由于该值的存储方式不允许框架观察到变化，因此每个框架都需要一种方法来检测这些值何时发生变化，并将组件标记为脏组件。

一旦标记为 dirty，就会重新运行组件，以便框架可以重新读取/重新创建值，从而检测哪些部分发生了更改，并将更改反映到 DOM。

脏检查是基于 value 的系统所能采用的唯一策略。它将最后一个已知值与当前值进行比较。

那怎么知道什么时候运行脏检查算法呢?通常不同的框架方式不同：

Angular: 隐式依赖 zone.js 来检测状态何时可能发生了变化。(因为它依赖于通过zone.js 的隐式检测，所以运行变更检测的频率比严格必要的要高。)
React: 显式依赖于开发人员调用 setState()。
Svelte: 自动生成 setState() 调用。

基于 Observable

Observable 对象是随时间变化的值。Observable 对象允许框架在值发生变化时及时知道具体的实例，因为将新值推送到 Observable 对象中需要特定的 API 来充当保护。

可观察对象是解决细颗粒 Reacitive 问题的明显方法。但是，因为 observable 需要显式调用 .subscribe() 和相应的调用 .unsubscribe()，导致开发体验不好。可观察对象也不能保证同步无故障的交付，UI 倾向于同步更新。下面我们给出代码示例：

Angular

import { Component } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';@Component({selector: 'app-counter',template: `<h1>Counter: {{ count$ | async }}</h1><button (click)="increment()">Increment</button>`,
})
export class CounterComponent {private countSubject = new BehaviorSubject<number>(0);count$: Observable<number> = this.countSubject.asObservable();increment() {this.countSubject.next(this.countSubject.value + 1);}
}

Svelte

<script>import { writable } from 'svelte/store';const count = writable(0);function increment() {// Update the count by incrementing itcount.update(n => n + 1);}
</script><div><h1>Counter: {$count}</h1><button on:click={increment}>Increment</button>
</div>

Svelte: 有趣的是，它有两个具有不同心智模型和语法的 Reacitive 系统。这是因为基于value 的模型只在 .svelte 文件中工作，所以将代码移出 .svelte 文件需要一些其他的 Reacitive 原语(Stores)。

我相信每个框架都应该有一个可以处理所有用例的单一 Reacitive 模型，而不是基于用例的不同 Reacitive 系统的组合。

基于 Signal

Signal 就像可观察对象的同步表兄弟，没有订阅/取消订阅。我相信这是一个重大的编码改进，我也相信 Signal 是未来。

Signal 的实现并不明显，这就是为什么行业花了这么长时间才走到这一步。Signal 需要与底层框架紧密耦合，以获得最佳的编码体验和性能。

为了获得最好的结果，需要协调框架渲染和可观察对象更新。下面给出几个示例：

Qwik

export const Counter = component$(() => {const count = useSignal(123);return (<button onClick$={() => count.value++}>{count.value}</button>);
});

SolidJS

export const Counter = (() => {const [count, setCount] = createSignal(123);return (<button onClick={() => setCount(count() + 1)}>{count()}</button>);
});

<template><section><h1>Count: {{ count }}</h1><button @click="incrementCount">+1</button></section>
</template><script setup>
import { ref } from 'vue';const count = ref(0);
function incrementCount() {count.value++;
}
</script>