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?

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

Schauen Sie sich einfach dieses einfache Beispiel an:

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.

Fun Fact: 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 Pakets „use-app-events“ sogar zwischen Browser-Tabs synchronisiert.

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

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

  updateTheme('light');

  // Output: 
Current theme: light
  return 
Current theme: {theme}
;
}

Was sind die Vorteile des Ansatzes:

1. Es ist nicht nötig, irgendwo oben einen Haken einzurichten, 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. Status wird zwischen Tabs 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.