反應(yīng)式編程是一種巧妙的方法，允許您創(chuàng)建動(dòng)態(tài)反映數(shù)據(jù)更改的應(yīng)用程序。它是 React 和 Vue 等許多現(xiàn)代 JavaScript 框架背后的核心技術(shù) - 它會(huì)根據(jù)用戶操作或其他狀態(tài)變化進(jìn)行更新。理解反應(yīng)性背后的內(nèi)容可能感覺工作量太大，感覺就像框架所針對(duì)的“神奇”抽象之一。但是，如果您可以自己構(gòu)建一個(gè)小型反應(yīng)式系統(tǒng)來看看它是如何工作的呢？

本文將通過使用 JavaScript 從頭開始??構(gòu)建一個(gè)簡(jiǎn)單的反應(yīng)式存儲(chǔ)來介紹反應(yīng)式編程的基礎(chǔ)知識(shí)。我們將以最小的實(shí)現(xiàn)方式介紹關(guān)鍵概念，包括依賴項(xiàng)跟蹤和自動(dòng)更新。最后，您應(yīng)該能夠了解如何創(chuàng)建反應(yīng)式數(shù)據(jù)結(jié)構(gòu)，以便在狀態(tài)發(fā)生變化時(shí)自動(dòng)跟蹤依賴關(guān)系并觸發(fā)更新。這種方法將幫助您理解反應(yīng)性，并為您提供自行實(shí)驗(yàn)的工具，并可能將其應(yīng)用到您的項(xiàng)目中。

讓我們開始看看我們將要使用的反應(yīng)式系統(tǒng)的核心組件：

• 效果：自動(dòng)運(yùn)行以響應(yīng)反應(yīng)數(shù)據(jù)變化的函數(shù)。它們是使用效果函數(shù)注冊(cè)的，該函數(shù)跟蹤對(duì)任何訪問信號(hào)的依賴關(guān)系。
• 信號(hào)：反應(yīng)性數(shù)據(jù)屬性，每當(dāng)其值發(fā)生變化時(shí)通知依賴效應(yīng)。
• 依賴性：信號(hào)和依賴于它們的效果之間的關(guān)系。跟蹤依賴關(guān)系，以便信號(hào)的變化觸發(fā)相關(guān)效果的更新。

現(xiàn)在我們已經(jīng)了解了響應(yīng)式編程定義，讓我們也提一下我們將要使用的 Javascript API：

Proxy：Proxy 對(duì)象允許您為另一個(gè)對(duì)象創(chuàng)建代理，使您能夠?yàn)榛静僮鳎ㄈ鐚傩栽L問和分配）定義自定義行為。在此代碼中，它用于使反應(yīng)式存儲(chǔ)（狀態(tài)對(duì)象）響應(yīng)更改。

Reflect：Reflect API 提供可攔截 JavaScript 操作的方法。它用于在響應(yīng)式函數(shù)中執(zhí)行諸如 Reflect.get 和 Reflect.set 之類的操作，從而允許代理處理屬性訪問和賦值，同時(shí)保持對(duì)象的原始行為。

Map：Map 對(duì)象是一個(gè)保存鍵值對(duì)的集合，其中鍵可以是任何數(shù)據(jù)類型。在此實(shí)現(xiàn)中，它用于創(chuàng)建 dependencyMap，該依賴關(guān)系跟蹤與每個(gè)信號(hào)關(guān)聯(lián)的依賴關(guān)系。

現(xiàn)在，讓我們開始定義我們的初始狀態(tài)：

// 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" });

所以，這就是我們所做的：

1. 我們創(chuàng)建了一個(gè)響應(yīng)式函數(shù)，它接受一個(gè)對(duì)象并返回一個(gè)代理，該代理將跟蹤將來對(duì)該對(duì)象進(jìn)行的更改
2. 我們創(chuàng)建了一個(gè)效果函數(shù)，它注冊(cè)依賴于狀態(tài)的反應(yīng)函數(shù)。定義效果后，它會(huì)立即運(yùn)行以注冊(cè)任何依賴項(xiàng)并相應(yīng)地設(shè)置 activeEffect。
3. 我們創(chuàng)建了一個(gè)依賴跟蹤器，它由三部分組成：trackDependency 函數(shù)檢查當(dāng)訪問響應(yīng)式屬性時(shí)是否有主動(dòng)效果。如果是，它會(huì)將該效果添加到 dependencyTrackerMap 中相應(yīng)屬性的一組依賴項(xiàng)中。反過來，triggerDependency 函數(shù)從 dependencyTrackerMap 中檢索與屬性關(guān)聯(lián)的依賴效果集，并在屬性值更改時(shí)執(zhí)行每個(gè)效果。

現(xiàn)在，讓我們創(chuàng)建一個(gè)帶有回調(diào)的效果并嘗試觸發(fā)它：

// 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" });

當(dāng)我們嘗試更新我們創(chuàng)建的狀態(tài)時(shí)，控制臺(tái)日志將觸發(fā)：

//We are using state from the previous snippet:
effect(() => {
    console.log(Count has changed: ${state.count});
});

effect(() => {
    console.log("Message has changed");
    console.log(The new message is: ${state.message});
});

以下是觸發(fā)依賴項(xiàng)時(shí)發(fā)生的情況的一些可視化：

在本文中，我們探討了如何在 JavaScript 中創(chuàng)建基本的反應(yīng)式系統(tǒng)，從而實(shí)現(xiàn)自動(dòng)更新（或副作用）以響應(yīng)數(shù)據(jù)的變化。此實(shí)現(xiàn)作為反應(yīng)式編程概念的介紹，它是框架“魔法”的一部分。此外，我們還了解了 Proxy 和 Reflect API 的作用并使用了它們，以及 Map 對(duì)象。

總之，這個(gè)反應(yīng)式系統(tǒng)管理依賴關(guān)系并在狀態(tài)變化時(shí)自動(dòng)更新效果。通過注冊(cè)依賴于特定反應(yīng)屬性的函數(shù)，系統(tǒng)可以跟蹤哪些函數(shù)依賴于哪些屬性，并在需要時(shí)重新運(yùn)行它們。這種方法允許創(chuàng)建響應(yīng)式應(yīng)用程序，其中狀態(tài)更改會(huì)自動(dòng)反映在 UI 中，無需額外代碼，從而改善開發(fā)人員體驗(yàn)并使數(shù)據(jù)處理更輕松、更高效。

以上是使用 Javascript 從頭開始??構(gòu)建反應(yīng)式商店的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！