Unterschätzter React Hook – useSyncExternalStore

Überblick

Entdecken Sie ein verstecktes Kraftpaket im React-Ökosystem: den „useSyncExternalStore“-Hook. Dieser Artikel befasst sich mit seinem transformativen Potenzial und stellt traditionelle Paradigmen der Staatsverwaltung in Frage. Durch die nahtlose Integration externer Datenquellen und die Verbesserung der komponentenübergreifenden Kommunikation bietet dieser Hook einen unkonventionellen und dennoch leistungsstarken Ansatz.

Reisen Sie mit uns, während wir useSyncExternalStore entmystifizieren. Wir analysieren seine Mechanismen, enthüllen seine Vorteile und zeigen praktische Anwendungen anhand von Beispielen aus der Praxis. Am Ende werden Sie verstehen, wie Sie diesen Haken nutzen können, um die Komplexität zu rationalisieren, die Leistung zu steigern und Ihrer Codebasis eine neue Ebene der Organisation zu verleihen.

Verwendung

Laut React ist useSyncExternalStore ein React-Hook, mit dem Sie einen externen Store abonnieren können. Aber was genau ist ein „externer Speicher“? Es übernimmt buchstäblich zwei Funktionen:

• Die Abonnementfunktion sollte den Store abonnieren und eine Funktion zum Abbestellen zurückgeben.
• Die getSnapshot-Funktion sollte einen Snapshot der Daten aus dem Store lesen. Okay, es könnte zunächst schwierig sein, es zu bekommen. Wir können auf das Beispiel eingehen.

Die Demo

Für unsere heutige Demo gehe ich auf eine klassische Anwendung ein: Die „Todo-Liste“.

Der Laden

Zuerst müssen wir den Ausgangszustand definieren:

export type Task = {
  id: string;
  content: string;
  isDone: boolean;
};

export type InitialState = {
  todos: Task[];
};

export const initialState: InitialState = { todos: [] };

Sie können sehen, dass ich die Typen definiert und dann den Status mit den Aufgaben als leeres Array erstellt habe

Jetzt ist der Reduzierer:

export function reducer(state: InitialState, action: any) {
  switch (action.type) {
    case "ADD_TASK":
      const task = {
        content: action.payload,
        id: uid(),
        isDone: false,
      };
      return {
        ...state,
        todos: [...state.todos, task],
      };

    case "REMOVE_TASK":
      return {
        ...state,
        todos: state.todos.filter((task) => task.id !== action.payload),
      };

    case "COMPLETE_TASK":
      const tasks = state.todos.map((task) => {
        if (task.id === action.payload) {
          task.isDone = !task.isDone;
        }
        return task;
      });
      return {
        ...state,
        todos: tasks,
      };

    default:
      return state;
  }
}

Unser Reduzierer hat nur 3 Aktionen: ADD_TASK, REMOVE_TASK und COMPLETE_TASK. Dies ist das klassische Beispiel einer To-Do-Listen-Logik.

Endlich, worauf wir warten, der Laden:

let listeners: any[] = [];

function createStore(reducer: any, initialState: InitialState) {
  let state = initialState;

  function getState() {
    return state;
  }

  function dispatch(action: any) {
    state = reducer(state, action);

    emitChange();
  }

  function subscribe(listener: any) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  }

  const store = {
    dispatch,
    getState,
    subscribe,
  };

  return store;
}

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

export const store = createStore(reducer, initialState);

Dieser Codeausschnitt veranschaulicht die Erstellung eines einfachen Redux-ähnlichen Zustandsverwaltungssystems in TypeScript. Hier ist eine Aufschlüsselung, wie es funktioniert:

1. Listeners-Array: Dieses Array enthält eine Liste von Listener-Funktionen, die benachrichtigt werden, wenn sich der Status ändert.

2. createStore-Funktion: Diese Funktion ist für die Erstellung eines Stores im Redux-Stil verantwortlich. Es werden zwei Parameter benötigt:

• Reduzierer: Eine Reduzierfunktion, die für die Berechnung des nächsten Status basierend auf dem aktuellen Status und der gesendeten Aktion verantwortlich ist.
• initialState: Der Anfangszustand der Anwendung.

1. Status: Diese Variable enthält den aktuellen Status der Anwendung.

2. getState-Funktion: Gibt den aktuellen Status zurück.

3. Dispatch-Funktion: Akzeptiert ein Aktionsobjekt, übergibt es zusammen mit dem aktuellen Status an den Reduzierer, aktualisiert den Status mit dem Ergebnis und ruft dann die emitChange-Funktion auf, um Listener über die Statusänderung zu benachrichtigen.

4. subscribe-Funktion: Akzeptiert eine Listener-Funktion, fügt sie dem Listeners-Array hinzu und gibt eine Bereinigungsfunktion zurück, die aufgerufen werden kann, um den Listener zu entfernen.

5. Store-Objekt: Das erstellte Store-Objekt enthält Verweise auf die Funktionen „dispatch“, „getState“ und „subscribe“.

6. emitChange-Funktion: Durchläuft das Listener-Array und ruft jede Listener-Funktion auf, um sie über eine Statusänderung zu informieren.

Am Ende des Codes wird mithilfe der Funktion „createStore“ ein Store mit einem bestimmten Reduzierer und einem bestimmten Anfangszustand erstellt. Dieser Speicher kann nun importiert und in anderen Teilen der Anwendung verwendet werden, um den Status zu verwalten und zu steuern.

Es ist wichtig zu beachten, dass dieser Code eine vereinfachte Implementierung eines Zustandsverwaltungssystems bietet und einige erweiterte Funktionen und Optimierungen fehlt, die in Bibliotheken wie Redux zu finden sind. Es dient jedoch als guter Ausgangspunkt, um die Grundkonzepte der Zustandsverwaltung mithilfe von Listenern und einer Reduzierfunktion zu verstehen.

Um den useSyncExternalStore-Hook zu verwenden. Wir können den Zustand wie folgt ermitteln:

const { todos } = useSyncExternalStore(store.subscribe, store.getState);

Mit diesem Hook-Aufruf können wir global und dynamisch auf den Store zugreifen und gleichzeitig die Lesbarkeit und Wartbarkeit beibehalten

Für und Wider

Der „useSyncExternalStore“-Hook bietet sowohl Vorteile als auch potenzielle Nachteile im Kontext der Statusverwaltung innerhalb einer React-Anwendung:

Vorteile:

1. Nahtlose Integration mit externen Quellen: Der Hook ermöglicht eine mühelose Integration mit externen Datenquellen und fördert so einen einheitlichen Ansatz für die Zustandsverwaltung. Diese Integration kann die Handhabung von Daten unterschiedlicher Herkunft vereinfachen und den Zusammenhalt der Anwendung verbessern.

2. Komponentenübergreifende Kommunikation: „useSyncExternalStore“ erleichtert die effiziente Kommunikation zwischen Komponenten, rationalisiert den Datenaustausch und reduziert den Bedarf an komplexem Propellerbohren oder Kontextmanagement.

3. Leistungsverbesserungen: Durch die Zentralisierung der Statusverwaltung und die Minimierung der Verbreitung von Statusaktualisierungen hat dieser Hook das Potenzial, die Rendering-Leistung zu optimieren, was zu einer reaktionsschnelleren und effizienteren Anwendung führt.

4. Einfachheit und sauberer Code: Die abstrahierte API des Hooks kann zu saubererem und besser organisiertem Code führen, wodurch er einfacher zu verstehen und zu warten ist, insbesondere in großen Anwendungen.

5. Reduzierter Boilerplate: „useSyncExternalStore“ kann die Notwendigkeit reduzieren, redundanten Code für die Zustandsverwaltung zu schreiben, und bietet eine präzise und konsistente Möglichkeit, den anwendungsweiten Zustand zu verwalten.

Nachteile:

1. Lernkurve: Entwickler, die mit diesem Hook nicht vertraut sind, können beim Umstieg von etablierteren Zustandsverwaltungslösungen eine Lernkurve erleben. Die Anpassung an einen neuen Ansatz könnte die Entwicklung zunächst verlangsamen.

2. Anpassungseinschränkungen: Die vordefinierten Funktionen des Hooks passen möglicherweise nicht perfekt zu den individuellen Anforderungen jeder Anwendung. Das Anpassen des Verhaltens, das über die Fähigkeiten des Hooks hinausgeht, kann zusätzliche Problemumgehungen erforderlich machen.

3. Potenzieller Abstraktions-Overhead: Abhängig von seiner internen Mechanik kann der Hook im Vergleich zu optimierteren Lösungen, die speziell auf die Anforderungen der Anwendung zugeschnitten sind, zu einem leichten Overhead bei Leistung oder Speichernutzung führen.

4. Community und Ökosystem: Als unterschätzter oder weniger bekannter Hook verfügt „useSyncExternalStore“ möglicherweise nicht über eine gut etablierte Community und ein umfassendes Ökosystem, was möglicherweise dazu führt, dass weniger Ressourcen oder Bibliotheken von Drittanbietern verfügbar sind .

5. Kompatibilität und zukünftige Updates: Die Kompatibilität mit zukünftigen Versionen von React und mögliche Updates des Hooks selbst könnten Anlass zur Sorge geben. Die Gewährleistung eines langfristigen Supports und nahtloser Upgrades kann besondere Sorgfalt erfordern.

Abschluss

Zusammenfassend bietet useSyncExternalStore einen einzigartigen Ansatz für die Zustandsverwaltung, der den Schwerpunkt auf nahtlose Integration und komponentenübergreifende Kommunikation legt. Obwohl es mehrere Vorteile bietet, wie z. B. verbesserte Leistung und vereinfachten Code, sollten Entwickler die Kompatibilität mit den Anforderungen ihres Projekts sorgfältig bewerten und die potenzielle Lernkurve und Einschränkungen berücksichtigen.

Das obige ist der detaillierte Inhalt vonUnterschätzter React Hook – useSyncExternalStore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!