前言

我们通过第一篇文章出的结论是基于依赖追踪的响应式程序的本质是在读取数据的时候收集依赖，在更新数据的时候触发依赖。在后续的文章中我们又知道了简单讲的依赖收集在发布订阅模式中就是订阅者进行订阅操作，触发依赖则是发布者进行发布操作。那么原理，只需要把数据的读写进行分离再结合发布订阅模式。就可以实现数据响应式了，

为了实现数据读写劫持，Vue 中不同的版本采用了不同的 JavaScript 原生 API：Vue2 使用 Object.definePropertyVue3 使用 Proxy + Object.defineProperty。按理说，我们在第一篇文章也介绍到了可以通过沙箱模式实现数据的读写分离。这样就能实现数据的响应式。接下来让我们通过沙箱模式手写一个响应式状态库，并把它集成到 React 中。

使用者痛点 🎯

• React 与响应式库对接繁琐：传统方案需要额外 HOC、装饰器或复杂配置，上手成本高。
• 缺少轻量化、可定制的状态管理：业务项目往往不需要完整的 Redux/MobX，而市面上又缺少「只要几行代码」就能跑通的数据响应程序。
• 调试困难：一旦出现无限循环或不更新的问题，很难定位到底是依赖收集出错还是订阅/发布机制失效。话说回来，
• 学习曲线陡峭：从 Vue 的响应式模型迁移到 React 时需要重新学习 Hook、Ref 等概念。导致迁移成本升高，老实说，

通过沙箱模式实现代理

JS 沙箱我们或多或少都接触过但可能不了解其细节。在计算机领域中，沙箱技术是一种用于隔离正在运行程序的安全机制。其目的是限制不可信进程或不可信代码运行时的访问权限

比如微信小程序、微前端框架还有 Vue 模板编译，都利用了沙箱来限制或包装代码执行环境。主要思想是创建一个独立运行环境，接下来暴露有限的方法给外部调用；当外部调用这些方法时内部可以拦截并做额外处理。

利用这一特性。可以在沙箱内部创建一个对象，并提供读取和写入方法。读取时完成依赖收集，写入时完成依赖触发，这样就能实现对象的读写代理。

// 创建作用域沙箱环境
function createSandbox {
// 与外部隔离的对象
const context = { value };// 外部读取方法
function getter {
return context.value;}
// 外部写入方法
function setter {
context.value = val;}
// 暴露给外部
return;}

上述代码仅创建了一个闭包作用域，并非完整运行时但已经足够完成读写拦截。

const = createSandbox;// 访问对象值
console.log);// 修改对象值
setCount;console.log);

通过发布订阅模式实现数据响应式

从回顾前文来看。"依赖收集" 等价于订阅者注册，“触发依赖” 等价于发布者广播。

只要在读取阶段把当前活跃订阅者加入集合。在写入阶段遍历集合并执行回调，就可以完成最简版的数据响应式。

// 为每个 context 增加 observers 用来存放订阅者
function createSandbox {
const context = {
value。observers: null,// Set
};}

全局订阅者占位符

let Listener = null;// 当前活跃的副作用函数

读取阶段自动注册订阅者：

function getter {
+ if {
+ if {
+ context.observers = new Set;+ } else {
+ context.observers.add;+ }
+ }
return context.value;}

写入阶段广播通知：

function setter {
context.value = val;+ if {
+ context.observers.forEach);+ }
}

*测试代码*

const = createSandbox;Listener = => console.log}`);Listener，// 初始化一次
Listener = null;// 清除占位
setCount;// 更新后自动打印新结果

实现响应式副作用函数

Affect/autorun 是大多数响应式库提供给开发者用来声明副作用的入口函数。它本质上就是把一个普通函数包装为“订阅者”。

function createEffect {
Listener = fn;// 把 fn 放进全局占位
fn;// 首次执行以触发依赖收集
Listener = null;// 清空占位避免误注册
}

*使用示例*

const = createSandbox;createEffect => console.log}`));不过，setCount，怎么说呢，// 自动重新计算并打印

加入调度器提高灵活性

Affect 在触发时常会配合调度器。以控制更新顺序、防抖、批量更新等需求。我们将调度器作为第二个参数传入。

- function createEffect {
- Listener = fn;
- fn，- Listener = null;- }
+ function createEffect {
+ Listener = { fn,onInvalid: scheduler };+ fn，+ Listener = null;其实，+ }

The setter 部分也要相应改造：

function setter {
context.value = val;- context.observers.forEach);+ if {
+ context.observers.forEach : o.fn);+ }
}

*带调度器的使用示例*

const = createSandbox;createEffect(
=> console.log}`),=> console.log
);setCount，

应用到 React 上 —— 手写 Observer HOC

MobX 与 Vue reactivity 在 React 中都是通过高阶组件或 Hook 将副作用与渲染关联起来。

// 引入 React 必备 Hook
import { useState,useRef } from 'react';let Listener = null;// 与前文共享全局占位符

CreateRenderEffect 实现细节

• #1 保存副作用实例：`useRef` 用来在组件生命周期内保持同一个 “listener” 对象。怎么说呢，
• #2 强制刷新：`useState` 搭配 `Symbol` 实现无状态强制更新。
• #3 在渲染期间挂载 Listener 并执行组件函数：`Listener` 被设置为当前组件对应的副作用对象，以便内部读取状态时完成依赖收集。
• #4 当任意被监听的数据变化后调度器会调用 `setState)` 从而触发 React 重渲染。怎么说呢，

function createRenderEffect {
return function RenderedComponent {
const = useState;话说回来，// 用于强制刷新
const listenerRef = useRef;// 保存副作用实例
if {
listenerRef.current = {
说到fn。BaseComponent,onInvalid: => setState) // 调度器：强制更新
};}
Listener = listenerRef.current;怎么说呢，// 挂载全局占位
const result = listenerRef.current.fn;// 执行实际渲染逻辑
Listener = null;// 清理
return result;}，}

SIGNAL 替代 Sandbox 命名

CreateSandbox/Getter/Setter** 改名为 Signal 系列。

// 新名称：createSignal
// 内部保持与前文相同逻辑，仅改名便于阅读
// 示例略。同上

.


javascript
import React from 'react';import ReactDOM from 'react-dom/client';// ---------- 响应式主要 ----------
let Listener = null;function createSignal {
const context = { value: initialValue,observers: null };function getter {
if {
if context.observers = new Set;else context.observers.add;}
return context.value;}
function setter {
if return;context.value = newVal;if
context.observers.forEach : o.fn);}
return，}
function createEffect {
Listener = { fn,onInvalid: scheduler };fn，不过，Listener = null;不过，}
// ---------- React Bridge ----------
function createRenderEffect {
return function RenderedComponent {
const = React.useState;其实，const admRef = React.useRef;
if {
admRef.current = { fn: BaseComponent,onInvalid: => setState) };老实说，}
Listener = admRef.current;const output = admRef.current.fn;Listener = null;说起来，return output;

};怎么说呢，}

// ---------- 使用 ----------
const = createSignal;

const CounterView = createRenderEffect => (
this counter is: {count}
));

function App {
return (


+1<="" =>="" button="" onclick="{" setcount="">

);}


ReactDOM.createRoot).render;

再看*运行效果*，点击按钮后计数即时更新。无需手动调用 `forceUpdate`，说明我们的手写响应式库成功与 React 完美结合。说起来，

🚀 


P1️⃣ 利用 **JS 沙箱** 创建独立作用域。实现对单一对象读写拦截，

P2️⃣ 引入 **发布‑订阅**模型，将读取阶段注册订阅者、写入阶段广播通知；

P3️⃣ 封装 **effect / scheduler** 为通用副作用函数，使得业务逻辑能够声明式地追踪状态；

P4️⃣ 编写 **React HOC** `createRenderEffect`。借助 `useRef` + `useState)` 把自定义响应程序挂钩到组件渲染周期，实现“自动重渲染”。

P5️⃣ 最终得到一个轻量级、仅几百行代码即可跑通的数据响应库，可直接替代 MobX/solid‑js 小型项目中的状态管理需求。


.

---