Créez une boutique réactive à partir de zéro en utilisant Javascript

La programmation réactive est une approche intéressante qui vous permet de créer des applications qui reflètent dynamiquement les changements de données. Il s'agit de la technologie de base derrière de nombreux frameworks JavaScript modernes comme React et Vue : elle se met à jour en réponse aux actions de l'utilisateur ou à d'autres changements d'état. Comprendre ce qui se cache sous le capot de la réactivité peut sembler trop de travail, cela ressemble à une de ces abstractions « magiques » auxquelles sont destinés les frameworks. Mais et si vous pouviez construire vous-même un petit système réactif pour voir comment il fonctionne réellement ?

Cet article présentera les bases de la programmation réactive en créant un magasin réactif simple à partir de zéro en JavaScript. Nous passerons en revue les concepts clés, notamment le suivi des dépendances et les mises à jour automatiques, dans une implémentation minimale. À la fin, vous devriez être capable de comprendre comment créer des structures de données réactives qui suivent automatiquement les dépendances et déclenchent des mises à jour chaque fois que l'état change. Cette approche vous aidera à comprendre la réactivité et vous donnera les outils pour l'expérimenter par vous-même, et éventuellement l'appliquer à vos projets.

Commençons par examiner les composants essentiels d'un système réactif que nous allons utiliser :

• Effets : fonctions qui s'exécutent automatiquement en réponse aux modifications des données réactives. Ils sont enregistrés à l'aide de la fonction d'effet, qui suit les dépendances sur tous les signaux consultés.
• Signaux : propriétés de données réactives qui notifient les effets dépendants chaque fois que leurs valeurs changent.
• Dépendances : Les relations entre les signaux et les effets qui en dépendent. Les dépendances sont suivies afin que les changements dans les signaux déclenchent des mises à jour des effets pertinents.

Maintenant que nous avons dépassé les définitions de programmation réactive, mentionnons également les API Javascript que nous allons utiliser :

Proxy : L'objet Proxy vous permet de créer un proxy pour un autre objet, vous permettant de définir un comportement personnalisé pour les opérations fondamentales (comme l'accès et l'affectation des propriétés). Dans ce code, il est utilisé pour rendre le magasin réactif (l'objet d'état) réactif aux changements.

Reflect : l'API Reflect fournit des méthodes pour les opérations JavaScript interceptables. Il est utilisé pour effectuer des opérations telles que Reflect.get et Reflect.set dans la fonction réactive, ce qui permet au proxy de gérer l'accès et l'affectation des propriétés tout en conservant le comportement d'origine de l'objet.

Map : L'objet Map est une collection qui contient des paires clé-valeur, où les clés peuvent être n'importe quel type de données. Il est utilisé dans cette implémentation pour créer le dependencyMap, qui suit les dépendances associées à chaque signal.

Maintenant, commençons à définir à quoi ressemblera notre état initial :

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

Alors, voici ce que nous avons fait :

1. Nous avons créé une fonction réactive qui prend en charge un objet et renvoie un proxy qui suivra les modifications qui seront apportées à l'objet à l'avenir
2. Nous avons créé une fonction d'effet qui enregistre les fonctions réactives qui dépendent de l'état. Lorsqu'un effet est défini, il s'exécute immédiatement pour enregistrer toutes les dépendances et définit activeEffect en conséquence.
3. Nous avons créé un tracker de dépendances qui se compose de trois parties : la fonction trackDependency vérifie s'il y a un effet actif lors de l'accès à une propriété réactive. Si oui, il ajoute cet effet à un ensemble de dépendances pour la propriété correspondante dans dependencyTrackerMap. À son tour, la fonction triggerDependency récupère l'ensemble des effets dépendants associés à une propriété de dependencyTrackerMap et exécute chacun d'eux lorsque la valeur de la propriété change.

Maintenant, créons un effet avec un rappel et essayons de le déclencher :

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

Les journaux de la console se déclencheront lorsque nous essaierons de mettre à jour l'état que nous avons créé :

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

Voici une petite visualisation de ce qui se passe lorsqu'une dépendance est déclenchée :

---

Dans cet article, nous avons exploré comment créer un système réactif de base en JavaScript, permettant des mises à jour automatiques (ou effets secondaires) en réponse aux modifications des données. Cette implémentation sert d'introduction aux concepts de programmation réactive, qui fait partie du cadre « magique ». En outre, nous avons appris ce que font les API Proxy et Reflect et les avons utilisées, ainsi que l'objet Map.

En résumé, ce système réactif gère les dépendances et met automatiquement à jour les effets lorsque l'état change. En enregistrant les fonctions qui reposent sur des propriétés réactives spécifiques, le système suit quelles fonctions dépendent de quelles propriétés, et les réexécute si nécessaire. Cette approche permet de créer des applications réactives où les changements d'état sont automatiquement reflétés dans l'interface utilisateur sans code supplémentaire, améliorant ainsi l'expérience des développeurs et rendant la gestion des données plus facile et plus efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!