响应式编程是一种巧妙的方法，允许您创建动态反映数据更改的应用程序。它是 react 和 vue 等许多现代 javascript 框架背后的核心技术 - 它会根据用户操作或其他状态变化进行更新。理解反应性背后的内容可能感觉工作量太大，感觉就像框架所针对的“神奇”抽象之一。但是，如果您可以自己构建一个小型反应式系统来看看它是如何工作的呢？

本文将通过使用 javascript 从头开始​​构建一个简单的反应式存储来介绍反应式编程的基础知识。我们将以最小的实现方式介绍关键概念，包括依赖性跟踪和自动更新。最后，您应该能够了解如何创建反应式数据结构，以便在状态发生变化时自动跟踪依赖关系并触发更新。这种方法将帮助您理解反应性，并为您提供自行实验的工具，并可能将其应用到您的项目中。

让我们开始看看我们将要使用的反应式系统的核心组件：

• 效果：自动运行以响应反应数据变化的函数。它们是使用效果函数注册的，该函数跟踪对任何访问信号的依赖关系。
• 信号：反应性数据属性，每当其值发生变化时通知依赖效应。
• 依赖性：信号和依赖于它们的效果之间的关系。跟踪依赖关系，以便信号的变化触发相关效果的更新。

现在我们已经了解了响应式编程定义，让我们也提一下我们将要使用的 javascript api：

proxy：proxy 对象允许您为另一个对象创建代理，使您能够为基本操作（如属性访问和分配）定义自定义行为。在此代码中，它用于使反应式存储（状态对象）响应更改。

reflect：reflect api 提供可拦截 javascript 操作的方法。它用于在响应式函数中执行诸如 reflect.get 和 reflect.set 之类的操作，从而允许代理处理属性访问和赋值，同时保持对象的原始行为。

map：map 对象是一个保存键值对的集合，其中键可以是任何数据类型。在此实现中使用它来创建 dependencymap，该依赖关系跟踪与每个信号关联的依赖关系。

现在，让我们开始定义我们的初始状态：

// let's define a map object to track our dependencies
const dependencytrackermap = new map();
// the activeeffect variable will hold the currently executing 
// effect function. 
// it will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeeffect = null

// this function will make an object reactive
function reactive(target) {
    return new proxy(target, {
        get(obj, prop) {
            trackdependency(prop); // track dependency
            return reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = reflect.set(obj, prop, value);
            triggerdependency(prop); // trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeeffect = fn;
    fn(); // run the function once to register dependencies
    activeeffect = null;
}

// this function will track dependencies
function trackdependency(key) {
    if (activeeffect) {
        if (!dependencytrackermap.has(key)) {
            dependencytrackermap.set(key, new set());
        }
        dependencytrackermap.get(key).add(activeeffect);
    }
}

// this function will trigger dependencies
function triggerdependency(key) {
    const deps = dependencytrackermap.get(key);
    if (deps) {
        deps.foreach(effect => effect());
    }
}

// this will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "hello" });