Proxies dans React : l'espion d'État sournois dont vous ne saviez pas avoir besoin

Avez-vous entendu parler du proxy Javascript ? J'arrive à remplacer useReducer en l'utilisant dans le composant React.

Dans cet article, je vais vous montrer comment exploiter les proxys pour détecter de manière transparente les changements dans l'état imbriqué, maintenir vos composants à jour et dire adieu au clonage profond manuel et autres maux de tête.

Quel est le problème avec les proxys ?

Le proxy de JavaScript est comme un super-espion qui peut intercepter et personnaliser les opérations effectuées sur un objet, telles que l'obtention, la définition ou la suppression de propriétés. Cela le rend parfait pour écouter les changements d'état, même dans les objets imbriqués, sans avoir besoin d'une comparaison approfondie ou de nouveaux rendus inutiles.

Voici ce que nous visons :

• État réactif qui se met à jour automatiquement lorsqu'une propriété imbriquée change.
• Plus de clonage manuel d'objets profondément imbriqués pour déclencher les mises à jour de React.
• Gérer les tableaux et les structures imbriquées avec un minimum d'effort.

Premiers pas : configuration du proxy

Avant de nous lancer dans l'intégration avec React, expliquons comment configurer un proxy qui gère les objets imbriqués. L'idée est simple : enveloppez votre état initial dans un proxy qui peut espionner toute modification et déclencher une mise à jour en cas de besoin.

Voici un exemple de base :

function createNestedProxy(state, onChange) {
  if (typeof state !== 'object' || state === null) {
    return state; // Return primitive values as-is
  }

  const handler = {
    get(target, property) {
      const value = target[property];
      if (typeof value === 'object' && value !== null) {
        return createNestedProxy(value, onChange); // Recursively proxy nested objects
      }
      return value;
    },
    set(target, property, value) {
      if (target[property] === value) return true; // No change, no update

      if (typeof value === 'object' && value !== null) {
        value = createNestedProxy(value, onChange); // Proxy nested objects
      }
      target[property] = value;
      onChange(); // Trigger the change callback
      return true;
    }
  };

  return new Proxy(state, handler);
}

Intégration du proxy avec React

Vient maintenant la partie amusante : intégrer cette configuration de proxy dans un hook React ! Nous allons créer un hook useProxyState qui encapsule notre état initial et garantit que toute modification déclenche automatiquement les nouveaux rendus React.

import { useState, useEffect } from 'react';

export function useProxyState(initialState) {
  const [state, setState] = useState(initialState);

  useEffect(() => {
    // Create a proxy with the onChange callback to trigger state updates
    const proxiedState = createProxyState(state, st => {
      // Trigger a React state update
      console.log('state updated');
      setState({ ...proxiedState });
    });

    // Set the state to the proxied state on the first render
    setState(proxiedState);
  }, []);

  return state;
}

Utilisons-le dans un composant de réaction

import { useProxyState } from './proxy';

function App() {
  const state = useProxyState({
    name: "Alice",
    details: {
      age: 25,
      hobbies: ["reading", "coding"]
    }
  });

  const updateName = () => {
    state.name = "Bob";
  };

  const addHobby = () => {
    state.details.hobbies.push("gaming");
  };

  return (
    <div>
      <h1>Name: {state.name}</h1>
      <h2>Age: {state.details.age}</h2>
      <h3>Hobbies:</h3>
      <ul>
        {state.details.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
      <button onClick={updateName}>Update Name</button>
      <button onClick={addHobby}>Add Hobby</button>
    </div>
  );
}

Pièges et points à surveiller

Bien que les proxys soient puissants, il y a quelques mises en garde :

• Soyez attentif aux performances dans les objets très grands ou profondément imbriqués.
• Le proxy JavaScript ne fonctionne pas dans les environnements qui ne le prennent pas en charge (comme les anciens navigateurs).

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!