Proxys in React: Der hinterhältige Staatsspion, von dem Sie nicht wussten, dass Sie ihn brauchen

Haben Sie schon von Javascript Proxy gehört? Es gelingt mir, useReducer zu ersetzen, indem ich es innerhalb der React-Komponente verwende.

In diesem Beitrag zeige ich Ihnen, wie Sie Proxys nutzen, um Änderungen im verschachtelten Zustand nahtlos zu erkennen, Ihre Komponenten auf dem neuesten Stand zu halten und sich vom manuellen Deep-Cloning und anderen Problemen zu verabschieden.

Was ist das Besondere an Proxys?

JavaScripts Proxy ist wie ein Superspion, der an einem Objekt ausgeführte Vorgänge abfangen und anpassen kann, z. B. das Abrufen, Festlegen oder Löschen von Eigenschaften. Dies macht es perfekt zum Abhören von Zustandsänderungen, selbst in verschachtelten Objekten, ohne dass ein umfassender Vergleich oder unnötiges erneutes Rendern erforderlich ist.

Das ist unser Ziel:

• Reaktiver Status, der automatisch aktualisiert wird, wenn sich eine verschachtelte Eigenschaft ändert.
• Kein manuelles Klonen tief verschachtelter Objekte mehr, um React-Updates auszulösen.
• Arrays und verschachtelte Strukturen mit minimalem Aufwand handhaben.

Erste Schritte: Einrichten des Proxys

Bevor wir uns mit der Integration mit React befassen, wollen wir erläutern, wie man einen Proxy einrichtet, der verschachtelte Objekte verarbeitet. Die Idee ist einfach: Wickeln Sie Ihren Ausgangszustand in einen Proxy ein, der alle Änderungen ausspionieren und bei Bedarf ein Update auslösen kann.

Hier ist ein einfaches Beispiel:

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

Integration des Proxys mit React

Jetzt kommt der spaßige Teil – die Integration dieses Proxy-Setups in einen React-Hook! Wir erstellen einen useProxyState-Hook, der unseren Anfangszustand umschließt und sicherstellt, dass alle Änderungen automatisch React-Re-Renderings auslösen.

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

Lassen Sie es uns in einer Reaktionskomponente verwenden

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

Fallstricke und Dinge, auf die Sie achten sollten

Obwohl Proxys leistungsstark sind, gibt es einige Einschränkungen:

• Achten Sie auf die Leistung bei sehr großen oder tief verschachtelten Objekten.
• JavaScripts Proxy funktioniert nicht in Umgebungen, die ihn nicht unterstützen (z. B. ältere Browser).

Das obige ist der detaillierte Inhalt vonProxys in React: Der hinterhältige Staatsspion, von dem Sie nicht wussten, dass Sie ihn brauchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!