Redux und React-Hooks sollten nicht als das Gegenteil voneinander gesehen werden. Es sind verschiedene Dinge mit unterschiedlichen Zielen.
Wann React-Hooks geboren wurde, schienen mehrere Entwickler verwirrt über die eingeführten Konzepte und deren Interpolation in die Redux Bibliothek. Die Verwenden Sie Reducer Hook hat diese Verwirrung noch verstärkt.
In diesem Artikel werde ich erklären, wie Redux und das neue Reagiere Hook Verwenden Sie Reducer sind unterschiedlich und wie können sie verwendet werden.
Redux wurde erstellt, um den Status in der gesamten Anwendung zu verwalten. Es bietet mehrere Tools, um die Komplexität der Verwaltung des globalen Anwendungsstatus zu verringern.
Die Neuzugänge zum Reagieren Bibliothek, Kontext verwenden und Verwenden Sie Reducer, kam auch, um den Staat zu verwalten Reagieren Bewerbung. Es hat jedoch einen subtilen Unterschied zu Redux, was ich weiter unten näher erläutern werde.
Aber zuerst möchte ich Ihnen vorstellen React-Hooks.
React Hooks ist die neue Art, den Status und den Lebenszyklus von React-Komponenten zu handhaben., ohne sich auf Komponentenklassen zu verlassen. Es wurde in der Version 16.8 der Bibliothek eingeführt und hat die Absicht, die Komplexität der Komponenten zu verringern, indem die Logik zwischen ihnen gemeinsam genutzt wird.
React-Hooks bietet eine einfache Handhabung der Komponente Verhalten und teile das Komponente Logik.
Das React-Hooks Die Funktion hat nicht die Absicht, die bisherigen Kenntnisse von zu ersetzen Reagieren Konzepte wie Lebenszyklus, Bundesstaat, Requisiten, Kontext, und Refs.
Mit React-Hooks, wir können unsere benutzerdefinierten Hooks schreiben, um Logik zu extrahieren, die in mehr als einer Komponente verwendet wird, und die implementieren D.R.Y (Wiederhole dich nicht) Muster.
Im folgenden Ausschnitt sehen Sie ein Beispiel für benutzerdefinierte Hooks, die für eines unserer Projekte geschrieben wurden:
Okay, jetzt wo wir es wissen React-Hooks, schauen wir uns das an Redux.
Redux ist eine Bibliothek zur Verwaltung des globalen Anwendungsstatus. In dieser Bibliothek finden wir verschiedene Tools, die uns Entwicklern helfen, mit dem Status der Anwendung Schritt zu halten und sie auch zu transformieren, indem sie dem Benutzer die Möglichkeit geben, etwas auszugeben Aktionen.
Redux, wie es in der Dokumentation heißt, kann in drei Grundprinzipien beschrieben werden:
Geschäft.Geschäft ist durch das Aussenden von Aktionen.Geschäft, der Reducer sollte als reine Funktion geschrieben werden.Redux sogar aktualisiert die Bibliothek mit seinem benutzerdefinierte Haken. Diese können verwendet werden, um die Komponenten zu integrieren, die das verwenden React-Hooks Funktionen für den Zugriff auf Daten aus den Speicher- und Versandaktionen, ohne sich auf die Komponentenklassen verlassen zu müssen.
Jetzt, wo wir etwas vertrauter sind Redux und React-Hooks lassen Sie uns den Unterschied zwischen ihnen sehen.
Beide kümmern sich um die Staatsverwaltung, jedoch mit mehreren Unterschieden. Der folgende Satz enthält viel Abstraktion, aber das scheint eine goldene Regel zu sein, um zu wissen, wann Sie ihn verwenden sollten Redux in deine Bewerbung:
Redux sollte in Anwendungen verwendet werden, die über mehrere Funktionen verfügen. Mit diesen Funktionen können Teile derselben Informationen gemeinsam genutzt werden.
Während der Verwendung des Kontext verwenden und Verwenden Sie Reducer, das Redux Funktionalitäten können reproduziert werden. Redux bietet einige kostenlose Tools, die uns helfen, die Anwendung zu verwalten, ohne das Rad neu zu erfinden. Es bietet uns auch Folgendes:
verbinden () Funktion.
Lassen Sie uns ein bisschen mehr über das eigentliche verstehen Reagieren Süchte, React-Hooks, um den globalen Staat und seine ideale Nutzung zu verwalten.
Das Kontext verwenden Hook kommt, um auf das zuzugreifen Bundesstaat das wird geteilt von Anbieter. Das beste Szenario, um das zu verwenden React-Hooks Kontext verwenden ist in einer kleinen Anwendung oder um kleine Informationen zwischen den Komponenten auszutauschen, z. B. das Thema der Anwendung. Das Kontext verwenden hat zwei Hauptkonzepte, die unten aufgeführt sind.
Dieser Anbieter erstellt die Thema Objekt, das in allen Anwendungen verwendet wird, und eine Funktion, um es zu aktualisieren, das Thema festlegen. Im folgenden Ausschnitt können Sie überprüfen Thema festlegen in Aktion.
Im obigen Ausschnitt können wir die Verwendung des globalen Objekts überprüfen Thema um die Hintergrundfarbe unserer Anwendung festzulegen.
Nach dem Kennenlernen der Kontext verwenden Funktion, es gibt noch eine, die die Entwickler verwirrt. Die Verwenden Sie Reducer Haken. Im folgenden Abschnitt werde ich diese Funktion durchgehen und ihren Anwendungsfall erläutern.
Das Verwenden Sie Reducer Hook sollte in Komponenten verwendet werden, die eine komplexe Logik dahinter haben. Es zeigt sich als die Hauptverwirrung mit dem Redux Bibliothek, weil Entwickler dazu neigen, das zu denken Verwenden Sie Reducer könnte die State Manager-Bibliothek ersetzen. Tatsächlich sollte seine Verwendung jedoch beschränkt werden auf Komponenten. Dies liegt hauptsächlich an der weltweiten Verwendung von Verwenden Sie Reducer erfordert das Umschreiben von neuem Code, um Funktionen wie die Steuerung von Komponenten-Updates durchzuführen.
Jetzt, wo wir den Anwendungsfall für den Verwenden Sie Reducer Hook ist Zeit, etwas Action zu zeigen. Im folgenden Beispiel verwenden wir das neue Reagiere Hook Sucht Verwenden Sie Reducer um eine Komponente mit unterschiedlichen Zuständen zu steuern.
Werfen wir einen tiefen Blick auf die Verwenden Sie Reducer Eingabe- und Ausgabeparameter.
Die Erklärung der Verwenden Sie Reducer Hook wird höchstwahrscheinlich so aussehen:const [state, dispatch] = useReducer (Reducer, INITIAL_STATE);
Wo können wir feststellen, dass Verwenden Sie Reducer Hook erhält zwei Parameter, wie unten gezeigt:
Der erste Ausgabeparameter des Hooks ist der tatsächliche Zustand der Komponente. Dieser Status sollte in unserer Anwendung zur Darstellung der Daten verwendet werden.
Es folgt auch der gleichen Regel der Reagieren Staat, das heißt:
Schreiben Sie niemals direkt in den Staat und der Status sollte durch Ausgeben aktualisiert werden Aktionen.
Das Aktionen das wird versandt von unseren Komponenten sollte immer als ein Objekt dargestellt werden mit Art und Nutzlast Schlüssel. Wo Art steht als Bezeichner des versandt Aktion und die Nutzlast ist die Information, dass dies Aktion wird zum Staat beitragen.
Wenn wir all diese Teile zusammenfügen, können wir das Endergebnis in der folgenden Anwendung sehen:
Redux und React-Hooks sollte als Ergänzung und auch als verschiedene Dinge gesehen werden. Während mit dem Neuen React-Hooks Ergänzungen, Kontext verwenden und Verwenden Sie Reducer, können Sie den globalen Staat managen, bei Projekten mit größerer Komplexität können Sie sich darauf verlassen Redux um Ihnen bei der Verwaltung der Bewerbungsdaten zu helfen.
Wenn du darüber nachdenkst eine Anwendung erstellen, beide können verwendet werden. Während Redux enthält den globalen Status und die Aktionen, die ausgelöst werden können, die React-Hooks Funktionen zur Behandlung des lokalen Komponentenstatus.
Ich bin seit 2016 Javascript-Entwickler und habe mobile Apps mit Ionic und React Native erstellt. Gitarrist und Kochliebhaber.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
