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:

98a86725d72d98f2b9cabc482365e7f8
  4b90a298546767af0dfbf93180d488e9
    9ccdbad4d7cf2a5ab2f30697c3e282f0
      805c6193b8bd78f920c172a82a0e8e47
        5b13746435d164e45e11fb6d2c565337
      98e42f95a9cd80104723307a01d2a42d
    37fe62713bcc433be054e66f06fcb3ad
  30fcab49531d609f912afed89b90ce7e
f27e91231f5585982d1354585706ae4a

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

---

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: dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: light16b28748ea4df4d9c2150843fecfba68
  return dc6dce4a544fdca2df29d5ac0ea9906bCurrent theme: {theme}16b28748ea4df4d9c2150843fecfba68;
}

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!