Vor einigen Tagen wurde ich in eine neue Abteilung eingewiesen. Mein neuer Kollege gab mir die Aufgabe, ein bestehendes React-Projekt umzugestalten.

Als ich den Code las, war ich schockiert über die Art und Weise, wie die Kontext-API verwendet wird. Der Programmierer zuvor, der alles (ja, fast alles) in ein Kontextobjekt einfügte, behandelte es als einen Speicher, um alle Zustände und sogar einige lokale temporäre Zustände zu verwalten. Das ist verrückt!

Und er codiert auch alles für eine Seite in nur einer (ja, absolut nur einer) Komponente in einer .ts-Datei. Es fällt mir so schwer, mir die Logik des Codes klar zu machen. Aber ich akzeptiere diesen beschissenen Code immer noch (ich habe keine Wahl), also treffe ich eine große Entscheidung: Ich würde alle diese Seiten in einer Woche mit Mobx neu schreiben und den Code in verschiedene funktionale Komponenten aufteilen.

Mit Mobx erstelle ich mehrere Stores, um alle Daten von den APIs zu verarbeiten und eine große Komponente in verschiedene kleine Teile aufzuteilen; Alles beginnt klar und einfach zu werden. Der lokale Status sollte in seinem Anwendungsbereich liegen, in dem er verwendet werden soll. Der gemeinsame Teil wird aus dem Store von Mobx bezogen.

Endlich habe ich das Context-Objekt vollständig entfernt, Tausende Codezeilen wurden entfernt und die Welt ist wieder still!

Ich möchte etwas zur Kontext-API sagen. Wenn Sie wirklich etwas haben, beispielsweise globale Konfigurationsinformationen, die Sie für die gesamte App freigeben möchten, können Sie die Kontext-API verwenden. Wenn Sie jedoch einfach die Verwendung einer Statusverwaltungsbibliothek eines Drittanbieters vermeiden möchten, ist es keine gute Idee, den Kontext als zu behandeln Ersatz.

Kontext sei Kontext und Status werde von Bibliotheken wie Mobx verwaltet.

Bitte stoppen Sie den Missbrauch der React Context API!