Kernpunkte
setState() -Methode, der Kontext -API und kürzlich eingeführten Hooks. State Management ist eines der schwierigsten Konzepte, die beim Lernen reagieren, da es viele Möglichkeiten gibt, es umzusetzen. Es gibt unzählige staatliche Verwaltungsbibliotheken in der NPM -Registrierung - wie Redux - und es gibt unzählige Bibliotheken, die auf den anderen staatlichen Verwaltungsbibliotheken basieren, um die ursprüngliche Bibliothek selbst zu vereinfachen - wie Redux einfach. Eine neue staatliche Managementbibliothek wird jede Woche in React eingeführt. Seit der Einführung von React bleibt das grundlegende Konzept der Aufrechterhaltung des Anwendungszustands gleich.
Die häufigste Möglichkeit, den Zustand in React Native zu setzen, besteht darin, die Methode von React zu verwenden. Wir können auch die Kontext-API verwenden, um Requisiten zu vermeiden, die Bohrungen durchführen und mehrschichtige Zustandsdaten übergeben, ohne sie an einzelne Unterkomponenten im Baum zu übergeben. setState()
In diesem Tutorial lernen wir, was der Zustand tatsächlich bedeutet, sowie die
-Methode, die Kontext -API und die React -Hooks. Dies ist die Grundlage für die Festlegung des Zustands in React Native. Alle Bibliotheken basieren auf den oben genannten grundlegenden Konzepten. Sobald Sie diese Konzepte verstanden haben, ist es einfach, die Bibliothek zu verstehen oder Ihre eigene staatliche Verwaltungsbibliothek zu erstellen. setState()
Möchten Sie React Native von Grund auf lernen? Dieser Artikel wird aus unserer fortgeschrittenen Bibliothek ausgehalten. Treten Sie mit SidePoint Premium bei, um eine komplette React Native Book Collection zu den Grundlagen, Projekten, Tipps und Tools für nur 9 US -Dollar pro Monat abzudecken.
Was ist Status?
Alles, was sich im Laufe der Zeit ändert, wird als Zustand bezeichnet. Wenn wir eine Zähleranwendung haben, ist der Staat der Zähler selbst. Wenn wir eine To-Do-App haben, ändert sich die Aufgabenliste im Laufe der Zeit, sodass diese Liste der Status ist. Sogar das Eingabeelement ist in gewissem Sinne ein Zustand, da es sich im Laufe der Zeit ändert, wenn der Benutzer ihn eingibt.
setState Einführung
Jetzt, da wir wissen, welcher Zustand ist, verstehen wir, wie React es speichert.
Betrachten Sie eine einfache Zähleranwendung:
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = {
counter: 0,
};
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
} In dieser Anwendung speichern wir den Status innerhalb eines Objekts im Konstruktor und weisen ihn this.state zu.
Denken Sie daran, dass der Zustand nur ein Objekt sein kann. Sie können keine direkten Nummern speichern. Aus diesem Grund erstellen wir im Objekt eine counter -Variable.
In der Methode render dekonstruieren wir das this.state -Merkmal aus counter und rendern es innerhalb von <h1>. Beachten Sie, dass es derzeit nur statische Werte angezeigt wird (0).
Sie können auch Zustände außerhalb des Konstruktors wie folgt schreiben:
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
} Angenommen, wir möchten, dass die Schaltflächen "" und "-" funktionieren. Wir müssen einen Code in ihren jeweiligen onPress Handlern schreiben:
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
} Wenn wir nun auf die Schaltflächen "" und "--" klicken, reagieren Sie die Komponente neu. Dies liegt daran, dass die setState() -Methode verwendet wird.
setState() -Methoden wird Teil des veränderten Baums erneut angeregt. In diesem Fall streift es <h1> erneut.
Wenn wir also klicken, erhöht es den Zähler um 1. Wenn wir auf "-" klicken, verringert es den Zähler um 1.
Denken Sie daran, dass Sie den Status nicht direkt ändern können, indem Sie this.state ändern. this.state = counter 1
this.setState die neuesten Änderungen widerspiegeln. this.state
wie unten gezeigt zu verwenden: setState()
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
} - als Parameter für die prevState -Methode. setState()
Was sind Hooks?
Hooks ist eine neue Funktion in React v16.8. Zuvor konnten Sie nur Status verwenden, indem Sie Klassenkomponenten erstellen. Sie können den Status in der Funktionskomponente selbst nicht verwenden.Mit der Zugabe von Hooks können Sie den Status in der Funktionskomponente selbst verwenden.
Konvertieren wir die obige
-Klasskomponente in die Funktionskomponente Counter und verwenden Sie React -Hooks: Counter
import React from 'react';
import { Text, Button } from 'react-native';
const Counter = () => {
const [counter, setCounter] = React.useState(0);
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => setCounter(counter + 1)} />
<Button title="Decrement" onPress={() => setCounter(counter - 1)} />
</>
);
};Lassen Sie uns den oben genannten Code überprüfen. Zunächst verwenden wir die integrierte
-Methode von React. useState kann von jedem Typ sein - wie eine Zahl, eine Zeichenfolge, ein Array, ein Boolescher Objekt oder jede Art von Daten -, von denen nicht useState setState() nur ein Objekt haben kann. setState()
In unserem Zählerbeispiel benötigt es eine Zahl und gibt ein Array mit zwei Werten zurück.
Der erste Wert im Der erste Wert im Array ist der aktuelle Statuswert. Daher ist counter derzeit 0.
Der zweite Wert im Array ist eine Funktion, mit der Sie den Statuswert aktualisieren können.
In unserem onPress können wir setCounter direkt counter direkt aktualisieren.
Daher wird unsere inkrementelle Funktion setCounter(counter 1) und unsere Dekrementierungsfunktion wird setCounter(counter - 1).
reagiert hat viele eingebaute Haken wie useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue,
,
und- Sie können weitere Informationen in der Dokumentation von React Hooks finden.
useState Zwei Regeln müssen beim Erstellen oder Verwenden von Haken befolgt werden: useEffect
rufen Sie nur Haken von React -Funktionen auf. Rufen Sie keine Haken von regulären JavaScript -Funktionen an. Stattdessen können Sie Hooks aus der React -Funktionskomponente oder aus benutzerdefinierten Hooks aufrufen.
Wenn Sie dieser Regel folgen, können Sie sicherstellen, dass alle staatlichen Logik in der Komponente aus ihrem Quellcode deutlich sichtbar sind. Haken sind sehr leicht zu verstehen und sind nützlich, wenn Status zu Funktionskomponenten hinzugefügt wird.
Kontext -API
Kontext bietet eine Möglichkeit, Daten in einem Komponentenbaum zu übergeben, ohne die Requisiten in jeder Schicht manuell zu übergeben. theme
App In einer typischen nativen Reaktionsanwendung werden Daten über Requisiten von oben nach unten übergeben. Wenn in der React -Anwendung mehrere Komponentenstufen vorhanden sind und die letzte untergeordnete Komponente im Komponentenbaum Daten von der obersten übergeordneten Komponente abrufen, müssen Sie die Requisiten einzeln übergeben. Pic
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = {
counter: 0,
};
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
} -Komponente an die theme -Komponente übergeben. Wenn wir den Kontext nicht verwenden, werden wir ihn normalerweise durch jede Zwischenstufe wie SO übergeben:
Der Wert von
wird von App -& gt; Das obige Problem wird als Requisitenbohrungen bezeichnet.
Dies ist ein einfaches Beispiel, aber berücksichtigen Sie eine echte Anwendung mit Dutzenden verschiedener Ebenen.
<🎜> Es wird schwierig, Daten durch jede untergeordnete Komponente zu übergeben, nur um sie in der letzten untergeordneten Komponente zu verwenden. Wir haben also einen Kontext. <🎜> <🎜> Kontext ermöglicht es uns, Daten direkt aus App -& gt zu übergeben. <🎜>Folgendes ist, wie die Kontext -API verwendet wird:
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = {
counter: 0,
};
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
} Zunächst verwenden wir die React.createContext API, um ThemeContext zu erstellen. Wir setzen light auf den Standardwert.
Dann verwenden wir das theme, um das Stammelement der ThemeContext.Provider -Komponente mit dem App zu wickeln, wenn wir
ThemeContext.Consumer Schließlich verwenden wir theme als Rendering -Requisite, um den Wert dark
ThemeContext.Consumer Rendering Propering -Modus ist gut, aber wenn wir mehrere Kontexte haben, kann dies eine Rückrufhölle verursachen. Um Callback Hell zu vermeiden, können wir Hooks anstelle von
Profile Das einzige, was wir ändern müssen
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState({ counter: counter + 1 })} />
<Button title="Decrement" onPress={() => this.setState({ counter: counter - 1 })} />
</>
);
}
}
gemeinsamer Zustand über Komponenten
Bisher haben wir nur den Status in der Komponente selbst verwaltet. Jetzt werden wir verstehen, wie man den Zustand zwischen Komponenten verwaltet.Angenommen, wir erstellen eine einfache Aufgabenlistenanwendung, wie unten gezeigt:
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
} -Komponente hinzufügen möchten, wie wird es in der AddTodo -Prägs der TodoList -Komponente angezeigt? Die Antwort ist "erhöhter Zustand". todos
import React from 'react';
import { Text, Button } from 'react-native';
class Counter extends React.Component {
state = { counter: 0 };
render() {
const { counter } = this.state;
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => this.setState(prevState => ({ counter: prevState.counter + 1 }))} />
<Button title="Decrement" onPress={() => this.setState(prevState => ({ counter: prevState.counter - 1 }))} />
</>
);
}
} -Komponente. Wir verwenden React Hook App, um useState als leeres Array zu speichern. todos
-Methode an die addTodo -Komponente und übergeben das AddTodo -Array an die todos -Komponente. TodoList
Die
-Komponente empfängt die AddTodo -Methode als Prop. Diese Methode sollte nach dem Drücken der Taste aufgerufen werden. addTodo
Element, das auch React Hook TextInput verwendet, um den Änderungswert von useState zu verfolgen. TextInput
übergebene App -Methode auf. Dies stellt sicher, dass die Aufgabenelemente der Liste addTodo hinzugefügt werden. Wir werden die todos -Box später löschen. TextInput
Die Komponente empfängt TodoList und präsentiert sie auf die Liste. todos
import React from 'react';
import { Text, Button } from 'react-native';
const Counter = () => {
const [counter, setCounter] = React.useState(0);
return (
<>
<Text>{counter}</Text>
<Button title="Increment" onPress={() => setCounter(counter + 1)} />
<Button title="Decrement" onPress={() => setCounter(counter - 1)} />
</>
);
};Auf diese Weise machen Sie die übergeordnete Komponente nicht zu einem großen Zustandsobjekt.
Schlussfolgerung
Insgesamt verstehen wir, was der Zustand ist und wie Statuswerte mithilfe der durch React bereitgestellten -API festgelegt werden können. Wir lernen auch über React -Hooks kennen, was es einfach macht, Status hinzuzufügen, um Komponenten zu funktionieren, ohne sie in Klassenkomponenten umzuwandeln. setState()
gelernt, die uns geholfen hat, die Requisiten -Rückrufhölle zu vermeiden. useContext
React wird sehr einfach, wenn Sie diese Kernkonzepte verstanden haben. Denken Sie daran, den Staat so weit wie möglich vor Ort zu halten. Verwenden Sie die Kontext -API nur, wenn Props -Bohrungen zum Problem werden. Fördern Sie den Staat nur bei Bedarf.
Sobald Ihre Anwendung komplex und schwierig ist, staatliche Änderungen zu debuggen, besuchen Sie staatliche Verwaltungsbibliotheken wie Redux und MOBX.
FAQs über React Native State Management
Was ist das Staatsmanagement bei React Native? Das staatliche Management in React Native bezieht sich auf die Verwaltung und Verarbeitung von Zustandsdaten (Daten und UI -Logik) in einer nativen React -Anwendung. Es umfasst effizient Aktualisierung und Synchronisierungszustände in verschiedenen Komponenten einer Anwendung.Warum ist das Staatsmanagement für die native Entwicklung von React wichtig? Das Zustandsmanagement ist entscheidend für den Reagieren nativ, da die dynamische Daten und die Benutzeroberfläche der Anwendung verwaltet und aktualisiert werden. Es stellt sicher, dass sich Änderungen in einem Teil der Anwendung genau in anderen Teilen widerspiegeln und eine nahtlose und reaktionsschnelle Benutzererfahrung bieten.
Was sind die unterschiedlichen Möglichkeiten, den Zustand in React Native zu verwalten? React Native bietet eine Vielzahl von Staatsmanagementmethoden, einschließlich lokaler Komponentenzustand, React -Hooks (
), Redux, MOBX und Kontext -APIs. Die Wahl hängt von der Komplexität und den spezifischen Anforderungen der Anwendung ab. useState
Wie erleichtert die Kontext -API das Staatsmanagement bei React Native? Die Kontext -API ist ein Merkmal in React, mit dem Komponenten den Zustand teilen können, ohne explizit Requisiten durch Komponentenbäume zu übergeben. Es ist nützlich, um den Global State zu verwalten, ohne dass zusätzliche Bibliotheken wie Redux erforderlich sind.
Diese überarbeitete Ausgabe behält die Originalbildorte und -formate bei, setzt den Text für Originalität neu auf, während die Kernbedeutung beibehält, und befasst sich mit den Anforderungen der Eingabeaufforderung.
Das obige ist der detaillierte Inhalt vonStaatsmanagement bei React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
