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

本文將透過(guò)使用 JavaScript 從頭開(kāi)始建立一個(gè)簡(jiǎn)單的反應(yīng)式儲(chǔ)存來(lái)介紹反應(yīng)式程式設(shè)計(jì)的基礎(chǔ)知識(shí)。我們將以最小的實(shí)作方式介紹關(guān)鍵概念，包括依賴項(xiàng)追蹤和自動(dòng)更新。最後，您應(yīng)該能夠了解如何建立反應(yīng)式資料結(jié)構(gòu)，以便在狀態(tài)變更時(shí)自動(dòng)追蹤依賴關(guān)係並觸發(fā)更新。這種方法將幫助您理解反應(yīng)性，並為您提供自行實(shí)驗(yàn)的工具，並可能將其應(yīng)用到您的專案中。

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

• 效果：自動(dòng)運(yùn)行以回應(yīng)反應(yīng)資料變化的函數(shù)。它們是使用效果函數(shù)註冊(cè)的，該函數(shù)追蹤對(duì)任何存取訊號(hào)的依賴關(guān)係。
• 訊號(hào)：反應(yīng)性資料屬性，每當(dāng)其值改變時(shí)通知依賴效應(yīng)。
• 依賴性：訊號(hào)和依賴它們的效果之間的關(guān)係。追蹤依賴關(guān)係，以便訊號(hào)的變化觸發(fā)相關(guān)效果的更新。

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

Proxy：Proxy 物件允許您為另一個(gè)物件建立代理，使您能夠?yàn)榛静僮鳎ㄈ鐚傩源嫒『头峙洌┒x自訂行為。在此程式碼中，它用於使反應(yīng)式儲(chǔ)存（狀態(tài)物件）響應(yīng)更改。

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

Map：Map 物件是一個(gè)保存鍵值對(duì)的集合，其中鍵可以是任何資料類型。在此實(shí)作中，它用於建立 dependencyMap，該依賴關(guān)係追蹤與每個(gè)訊號(hào)關(guān)聯(lián)的依賴關(guān)係。

現(xiàn)在，讓我們開(kāi)始定義我們的初始狀態(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è)物件並返回一個(gè)代理，該代理將追蹤將來(lái)對(duì)該物件進(jìn)行的更改
2. 我們建立了一個(gè)效果函數(shù)，它註冊(cè)依賴狀態(tài)的反應(yīng)函數(shù)。定義效果後，它會(huì)立即運(yùn)行以註冊(cè)任何依賴項(xiàng)並相應(yīng)地設(shè)定 activeEffect。
3. 我們建立了一個(gè)依賴追蹤器，它由三個(gè)部分組成：trackDependency 函數(shù)檢查當(dāng)存取響應(yīng)式屬性時(shí)是否有主動(dòng)效果。如果是，它會(huì)將該效果新增至 dependencyTrackerMap 中對(duì)應(yīng)屬性的一組相依性。反過(guò)來(lái)，triggerDependency 函數(shù)會(huì)從 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)我們嘗試更新我們建立的狀態(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ā)生的情況的一些視覺(jué)化：

在本文中，我們探討如何在 JavaScript 中建立基本的反應(yīng)式系統(tǒng)，從而實(shí)現(xiàn)自動(dòng)更新（或副作用）以回應(yīng)資料的變化。此實(shí)現(xiàn)作為反應(yīng)式程式設(shè)計(jì)概念的介紹，它是框架“魔法”的一部分。此外，我們還了解了 Proxy 和 Reflect API 的作用並使用了它們，以及 Map 物件。

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

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