Das globale Erstellen der Zustände kann die Leistung Ihrer App verlangsamen. Erfahren Sie, wie Sie Zustände in Ihrer React-Anwendung effektiv erstellen und nutzen können.

Wenn Sie viel React-Code geschrieben haben, ist es wahrscheinlich, dass Sie den Status falsch verwendet haben. Ein häufiger Fehler, den viele React-Entwickler machen, besteht darin, Zustände global in der Anwendung zu speichern, anstatt sie in den Komponenten zu speichern, in denen sie verwendet werden.

Erfahren Sie, wie Sie Ihren Code umgestalten können, um den lokalen Status zu nutzen, und warum dies immer eine gute Idee ist.

Grundlegendes Beispiel für einen Zustand in Reaktion

Hier ist ein sehr einfache Thekenanwendung Dies veranschaulicht, wie der Status normalerweise in React gehandhabt wird:

importieren {useState} aus'reagieren'
importieren {Schalter} aus'Schalter'
FunktionApp(){
const [count, setCount] = useState(0)
zurückkehren<Schalterzählen={zählen}setCount={setCount} />
}
ExportStandard App

In den Zeilen 1 und 2 importieren Sie die

instagram viewer
useState() Haken zum Erstellen des Staates und der Schalter Komponente. Sie definieren die zählen Staat und setCount Methode zum Aktualisieren des Status. Dann geben Sie beide an den weiter Schalter Komponente.

Der Schalter Die Komponente rendert dann die zählen und Anrufe setCount um die Anzahl zu erhöhen und zu verringern.

FunktionSchalter({count, setCount}) {
zurückkehren (

Du hast das nicht definiert zählen variabel und setCount Funktion lokal innerhalb der Schalter Komponente. Stattdessen haben Sie es von der übergeordneten Komponente übergeben (App). Mit anderen Worten: Sie verwenden einen globalen Status.

Das Problem mit globalen Staaten

Das Problem bei der Verwendung eines globalen Status besteht darin, dass Sie den Status in einer übergeordneten Komponente (oder einem übergeordneten Element eines übergeordneten Elements) speichern und dann es als Requisite weitergeben zu der Komponente, wo dieser Zustand tatsächlich benötigt wird.

Manchmal ist dies in Ordnung, wenn Sie einen Status haben, der von vielen Komponenten gemeinsam genutzt wird. Aber in diesem Fall kümmert sich keine andere Komponente darum zählen Staat mit Ausnahme der Schalter Komponente. Daher ist es besser, den Staat in den zu verschieben Schalter Komponente dort, wo sie tatsächlich verwendet wird.

Verschieben des Status in die untergeordnete Komponente

Wenn Sie den Staat in den verschieben Schalter Komponente, es würde so aussehen:

importieren {useState} aus'reagieren'
FunktionSchalter() {
const [count, setCount] = useState(0)
zurückkehren (

Dann in deinem App Komponente, Sie müssen nichts an die weitergeben Schalter Komponente:

// Importe
FunktionApp(){
zurückkehren<Schalter />
}

Der Zähler funktioniert genauso wie zuvor, der große Unterschied besteht jedoch darin, dass sich alle Ihre Bundesstaaten lokal darin befinden Schalter Komponente. Wenn Sie also einen weiteren Zähler auf der Startseite benötigen, benötigen Sie zwei unabhängige Zähler. Jeder Zähler ist in sich geschlossen und verwaltet seinen gesamten Status.

Umgang mit Zuständen in komplexeren Anwendungen

Eine andere Situation, in der Sie einen globalen Status verwenden würden, sind Formulare. Der App Die folgende Komponente übergibt die Formulardaten (E-Mail und Passwort) und die Setter-Methode an die Login Formular Komponente.

importieren { useState } aus"reagieren";
importieren { Login Formular } aus"./Login Formular";
FunktionApp() {
const [formData, setFormData] = useState({
 Email: "",
 Passwort: "",
 });


FunktionupdateFormData(neue Daten) {
 setFormData((vorh) => {
zurückkehren { ...prev, ...newData };
 });
 }


FunktiononSubmit() {
Konsole.log (formData);
 }
zurückkehren (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Der Login Formular Die Komponente nimmt die Anmeldeinformationen auf und rendert sie. Wenn Sie das Formular absenden, wird das aufgerufen Daten aktualisieren Funktion, die auch von der übergeordneten Komponente weitergegeben wird.

FunktionLogin Formular({ onSubmit, data, updateData }) {
FunktionhandleSubmit(e) {
 e.preventDefault();
 onSubmit();
 }
zurückkehren (

Anstatt den Status auf der übergeordneten Komponente zu verwalten, ist es besser, den Status dorthin zu verschieben LoginForm.js, wo Sie den Code verwenden. Dadurch wird jede Komponente eigenständig und ist für die Daten nicht auf eine andere Komponente (d. h. die übergeordnete Komponente) angewiesen. Hier ist die modifizierte Version des Login Formular:

importieren { useRef } aus"reagieren";
FunktionLogin Formular({onSubmit}) {
const emailRef = useRef();
const passwortRef = useRef();

FunktionhandleSubmit(e) {
 e.preventDefault();
 onSubmit({
 E-Mail: emailRef.current.value,
 Passwort: passwortRef.aktueller.Wert,
 });
 }
zurückkehren (

Hier binden Sie die Eingabe mit an eine Variable ref Attribute und die useRef Reagieren Sie den Hook, anstatt die Update-Methoden direkt zu übergeben. Dies hilft Ihnen, ausführlichen Code zu entfernen und Optimieren Sie die Formularleistung mithilfe des useRef-Hooks.

In der übergeordneten Komponente (App.js), können Sie sowohl den globalen Status als auch entfernen updateFormData() Methode, weil Sie sie nicht mehr benötigen. Die einzige verbleibende Funktion ist onSubmit(), die Sie aus dem Inneren aufrufen Login Formular Komponente zum Protokollieren der Anmeldedaten auf der Konsole.

FunktionApp() {
FunktiononSubmit(Formulardaten) {
Konsole.log (formData);
 }
zurückkehren (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Sie haben Ihren Bundesstaat nicht nur so lokal wie möglich gestaltet, sondern auch die Notwendigkeit eines Bundesstaates überhaupt überflüssig gemacht (und genutzt). Refs stattdessen). Also dein App Die Komponente ist wesentlich einfacher geworden (mit nur einer Funktion).

Dein Login Formular Die Komponente wurde auch einfacher, da Sie sich nicht um die Aktualisierung des Status kümmern mussten. Vielmehr behalten Sie einfach zwei im Auge Refs, und das ist es.

Umgang mit Shared State

Es gibt ein Problem mit dem Ansatz, den Staat so lokal wie möglich zu gestalten. Es kommt häufig vor, dass die übergeordnete Komponente den Status nicht verwendet, ihn aber an mehrere Komponenten weitergibt.

Ein Beispiel ist ein TodoContainer übergeordnete Komponente mit zwei untergeordneten Komponenten: Aufgabenliste Und TodoCount.

FunktionTodoContainer() {
const [todos, setTodos] = useState([])
zurückkehren (
 <>


 </>
 )
}

Beide untergeordneten Komponenten erfordern die alles Staat, also TodoContainer gibt es an beide weiter. In solchen Szenarien muss man den Staat so lokal wie möglich gestalten. Im obigen Beispiel wird es in das eingefügt TodosContainer ist so lokal wie möglich.

Wenn Sie diesen Zustand in Ihre versetzen würden App Komponente wäre sie nicht so lokal wie möglich, da sie nicht das nächstgelegene übergeordnete Element der beiden Komponenten ist, die die Daten benötigen.

Bei großen Anwendungen reicht die Verwaltung des Status einfach mit dem aus useState() Haken kann sich als schwierig erweisen. In solchen Fällen müssen Sie sich möglicherweise für Folgendes entscheiden Kontext-API reagieren oder Redux reagieren den Staat effektiv zu verwalten.

Erfahren Sie mehr über React Hooks

Hooks bilden die Grundlage von React. Durch die Verwendung von Hooks in React können Sie das Schreiben von langwierigem Code vermeiden, der andernfalls Klassen verwenden würde. Der useState()-Hook ist zweifellos der am häufigsten verwendete React-Hook, aber es gibt viele andere wie useEffect(), useRef() und useContext().

Wenn Sie die Entwicklung von Anwendungen mit React beherrschen möchten, müssen Sie wissen, wie Sie diese Hooks in Ihrer Anwendung verwenden.