Verwenden Sie nicht React.Context, sondern erstellen Sie Hooks.

In diesem Artikel schauen wir uns an, wie Sie React.Context in Ihren Apps loswerden und eine Motivation dafür finden.

Sie sind wahrscheinlich mit React vertraut und haben möglicherweise bereits Erfahrung mit React.Context, wenn Sie bei diesem Artikel gelandet sind, aber wenn nicht, lesen Sie ihn trotzdem gerne und teilen Sie ihn mit Leuten, die interessiert sein könnten.

1. Warum React.Context vermeiden?

Der Kontext beeinträchtigt die Lesbarkeit, verwickelt die App und schränkt sie ein.

Schauen Sie sich einfach dieses einfache Beispiel an:

<ThemeContext.Provider value={theme}>
  <AuthContext.Provider value={currentUser}>
    <ModalContext.Provider value={modal}>
      <VolumeContext.Provider value={volume}>
        <RouterProvider router={router} />
      </VolumeContext.Provider>
    </ModalContext.Provider>
  </AuthContext.Provider>
</ThemeContext.Provider>

Sieht nicht allzu verständlich und zuverlässig aus, oder?

Hier sind einige mögliche Probleme bei der Verwendung von Kontexten:

1. Je mehr Kontexte verwendet werden, desto weniger lesbar und kontrollierbar wird Ihre App;
2. Manchmal erfordern verschachtelte Kontexte eine korrekte Reihenfolge, um zu funktionieren, was die Wartung Ihrer App erschwert;
3. Einige Kontexte sollten während der Einrichtung einer Testumgebung wiederverwendet werden, damit sie weiterhin ordnungsgemäß funktionieren;
4. Sie müssen sicherstellen, dass die Komponente ein untergeordnetes Element im Baum eines erforderlichen Kontextanbieters ist.

Lustige Tatsache: Die bekannte „Promise-Hölle“ sieht ähnlich aus ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

Nach dem Login kopieren

2. Wie ersetze ich React.Context?

Erstellen Sie stattdessen Hooks.

Ersetzen wir ThemeContext aus dem obigen Beispiel durch einen benutzerdefinierten useTheme-Hook:

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

Wir haben ein npm-Paket namens use-app-events verwendet, um alle Instanzen des useTheme-Hooks kommunizieren zu lassen, um ihren Theme-Status zu synchronisieren. Es stellt sicher, dass der Theme-Wert derselbe ist, wenn useTheme mehrmals in der App aufgerufen wird.

Darüber hinaus wird das Theme dank des Use-App-Events-Pakets sogar zwischen Browser-Registerkarten synchronisiert.

An diesem Punkt wird ThemeContext nicht mehr benötigt, da der useTheme-Hook überall in der App verwendet werden kann, um das aktuelle Thema abzurufen und zu aktualisieren:

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: <div>Current theme: light</div>
  return <div>Current theme: {theme}</div>;
}

Was sind die Vorteile des Ansatzes:

1. Es ist nicht nötig, irgendwo oben am Baum einen Haken anzubringen, bevor Kinder ihn verwenden können (einschließlich Testumgebungen);
2. Die Renderstruktur ist sauberer, d. h. keine verwirrende pfeilförmige Struktur mehr, die aus Ihren Kontexten erstellt wird;
3. Der Status wird zwischen den Registerkarten synchronisiert.

Abschluss

React.Context war vor einiger Zeit sicherlich ein leistungsstarkes Tool, aber Hooks bieten eine kontrollierte und zuverlässigere Möglichkeit, den globalen Status Ihrer App zu verwalten, wenn sie ordnungsgemäß in Verbindung mit dem Paket „use-app-events“ implementiert werden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie nicht React.Context, sondern erstellen Sie Hooks.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!