Points de base
setState() de React, l'API de contexte et les crochets récemment introduits. La gestion de l'État est l'un des concepts les plus difficiles à maîtriser dans l'apprentissage React Native, car il existe de nombreuses façons de la mettre en œuvre. Il existe d'innombrables bibliothèques de gestion d'État sur le registre NPM - telles que Redux - et il existe d'innombrables bibliothèques construites sur les autres bibliothèques de gestion de l'État pour simplifier la bibliothèque d'origine elle-même - telle que Redux. Une nouvelle bibliothèque de gestion d'État est introduite dans React chaque semaine, mais depuis l'introduction de React, le concept de base de la maintenance de l'état d'application reste le même.
La façon la plus courante de définir l'état dans React Native est d'utiliser la méthode de React setState(). Nous pouvons également utiliser l'API de contexte pour éviter le forage des accessoires et transmettre l'état multicouche sans le passer à des sous-composants individuels de l'arbre.
Récemment, les crochets sont apparus dans React V16.8.0, un nouveau mode qui simplifie l'utilisation de l'état dans React. React Native l'a obtenu en V0.59.
Dans ce tutoriel, nous apprendrons ce que l'État signifie réellement, ainsi que la méthode setState(), l'API de contexte et les crochets React. C'est la base de la définition de l'état dans React Native. Toutes les bibliothèques sont construites en fonction des concepts de base ci-dessus. Ainsi, une fois que vous comprenez ces concepts, il sera facile de comprendre la bibliothèque ou de créer votre propre bibliothèque de gestion d'État.
Vous voulez apprendre React natif à partir de zéro? Cet article est extrait de notre bibliothèque avancée. Rejoignez SITEPoint Premium maintenant pour une collection de livres natives React complète couvrant les bases, les projets, les conseils et les outils, pour seulement 9 $ par mois.
Qu'est-ce que le statut?
Tout ce qui change avec le temps est appelé un état. Si nous avons une application de compteur, l'état est le compteur lui-même. Si nous avons une application TAIS, la liste de tâches change dans le temps, donc cette liste sera un statut. Même l'élément d'entrée est un état dans un sens, car il change avec le temps lorsque l'utilisateur le tape.
SetState Introduction
Maintenant que nous savons ce qu'est l'État, comprenons comment React les stocke.
Considérez une simple application de contre-application:
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 })} />
</>
);
}
} Dans cette application, nous stockons l'état dans un objet dans le constructeur et l'attribuons à this.state.
N'oubliez pas que l'état ne peut être qu'un seul objet. Vous ne pouvez pas stocker les numéros directement. C'est pourquoi nous créons une variable counter à l'intérieur de l'objet.
Dans la méthode render, nous déconstruions l'attribut this.state de counter et le rendons dans <h1>. Notez qu'à l'heure actuelle, il affichera uniquement des valeurs statiques (0).
Vous pouvez également écrire des états en dehors du constructeur comme suit:
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 })} />
</>
);
}
} Supposons maintenant que nous voulons que les boutons "" et "-" fonctionnent. Nous devons écrire du code à l'intérieur de leurs gestionnaires onPress respectifs:
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 }))} />
</>
);
}
} Maintenant, lorsque nous cliquons sur les boutons "" et "-", réagir à nouveau le composant. En effet, la méthode setState() est utilisée.
setState() renvoie une partie de l'arbre modifié. Dans ce cas, il redevient <h1>.
Donc, si nous cliquons ", cela augmentera le compteur de 1. Si nous cliquons "-", cela réduira le compteur de 1.
N'oubliez pas que vous ne pouvez pas modifier le statut directement en changeant this.state; this.state = counter 1
immédiatement après l'appel this.setState, il ne reflétera pas les derniers changements. this.state
comme indiqué ci-dessous: 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 }))} />
</>
);
}
} - en tant que paramètre de la méthode prevState. setState()
Que sont les crochets?
Hooks est une nouvelle fonctionnalité dans React v16.8. Plus tôt, vous ne pouviez utiliser l'état qu'en créant des composants de classe. Vous ne pouvez pas utiliser l'état dans le composant de fonction lui-même.Avec l'ajout de crochets, vous pouvez utiliser l'état dans le composant de fonction lui-même.
Converons le composant de classe ci-dessus
en composant de fonction Counter et utilisons des crochets React: 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)} />
</>
);
};passons en revue le code ci-dessus. Tout d'abord, nous utilisons la méthode d'intégration de React intégrée.
peut être de n'importe quel type, tel qu'un nombre, une chaîne, un tableau, un booléen, un objet ou tout type de données - contrairement à useState, useState ne peut avoir qu'un seul objet. setState()
Dans notre compteur, il prend un nombre et renvoie un tableau contenant deux valeurs.
La première valeur dans le La première valeur du tableau est la valeur d'état actuelle. Par conséquent, counter est actuellement 0.
La deuxième valeur du tableau est une fonction qui vous permet de mettre à jour la valeur de l'état.
Dans notre onPress, nous pouvons utiliser setCounter pour mettre à jour counter directement.
Par conséquent, notre fonction incrémentielle devient setCounter(counter 1) et notre fonction décrémentale devient setCounter(counter - 1).
React a de nombreux crochets intégrés tels que useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffect, useDebugValue,
,
et— - Vous pouvez trouver plus d'informations dans la documentation React Hooks.
useState Deux règles doivent être suivies lors de la construction ou de l'utilisation de crochets: useEffect
Appelez les crochets à partir des fonctions React uniquement. N'appelez pas les crochets à partir de fonctions JavaScript ordinaires. Au lieu de cela, vous pouvez appeler des crochets à partir du composant de la fonction React ou à partir de crochets personnalisés.
En suivant cette règle, vous pouvez vous assurer que toute logique avec état dans le composant est clairement visible à partir de son code source. Les crochets sont très faciles à comprendre et sont utiles lors de l'ajout d'état aux composants de la fonction.
API de contexte
Le contexte fournit un moyen de passer des données dans un arbre de composant sans transmettre manuellement les accessoires à chaque couche. theme
App Dans une application native React typique, les données sont passées de haut en bas via les accessoires. S'il y a plusieurs niveaux de composants dans l'application React et le dernier composant enfant dans l'arborescence des composants souhaite récupérer les données du composant parent le plus haut, vous devez transmettre des accessoires individuellement. 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 })} />
</>
);
}
} au composant theme. Normalement, si nous n'utilisons pas de contexte, nous le passerons à chaque niveau intermédiaire, comme ainsi:
La valeur de
est passée de l'application - & gt; Le problème ci-dessus est appelé forage des accessoires.
C'est un exemple simple, mais considérez une véritable application avec des dizaines de niveaux différents.
<🎜> Il devient difficile de transmettre des données via chaque composant enfant juste pour l'utiliser dans le dernier composant enfant. Nous avons donc un contexte. <🎜> <🎜> Le contexte nous permet de transmettre des données directement à partir de l'application - & gt; <🎜>Ce qui suit est de savoir comment utiliser l'API de contexte:
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 })} />
</>
);
}
} Tout d'abord, nous utilisons l'API React.createContext pour créer ThemeContext. Nous définissons light sur la valeur par défaut.
Ensuite, nous utilisons le theme pour envelopper l'élément racine du composant ThemeContext.Provider avec le App lorsque nous fournissons
ThemeContext.Consumer Enfin, nous utilisons theme car l'hélice de rendu pour obtenir la valeur dark est
ThemeContext.Consumer Le mode de rendu des accessoires est bon, mais si nous avons plusieurs contextes, cela peut provoquer un enfer de rappel. Pour éviter l'enfer de rappel, nous pouvons utiliser des crochets au lieu de
Profile La seule chose que nous devons modifier est les détails de l'implémentation des composants
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 })} />
</>
);
}
}De cette façon, nous n'avons pas à nous soucier de l'enfer de rappel.
État partagé entre les composants
Jusqu'à présent, nous n'avons géré que l'état dans le composant lui-même. Nous allons maintenant comprendre comment gérer l'état entre les composants.
Supposons que nous créons une application de liste de tâches simples comme indiqué ci-dessous:
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 }))} />
</>
);
}
}
AddTodo Maintenant, si nous voulons ajouter une to-do du composant TodoList, comment sera-t-il affiché dans le plant todos du composant
Si deux composants de frères et sœurs veulent partager l'état, ils doivent être promus dans le composant parent. L'exemple complet doit ressembler à ceci:
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 }))} />
</>
);
}
}
App Ici, nous enregistrons l'état dans le composant useState. Nous utilisons React Hook todos pour stocker
addTodo Ensuite, nous passons la méthode AddTodo au composant todos et passons le tableau TodoList au composant
Le composant AddTodo addTodo reçoit la méthode
TextInput Nous avons également un élément useState, qui utilise également React Hook TextInput pour suivre la valeur de changement de
App Après avoir appuyé sur le bouton, nous appellerons la méthode addTodo passée du parent todos. Cela garantit que les éléments de tâche sont ajoutés à la liste TextInput. Nous effacerons la case
TodoList todos Le composant reçoit
Vous pouvez également essayer de supprimer un élément de tâches pour s'entraîner à vous améliorer. Voici la solution:
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)} />
</>
);
};Il s'agit de la pratique la plus courante de la réaction. L'amélioration n'est pas aussi simple qu'il n'y paraît. Ceci est un exemple simple, mais dans une application réelle, nous ne savons pas quel état doit être promu à son parent pour une utilisation dans les composants de frères et sœurs. Par conséquent, premièrement, l'état est conservé dans la composante elle-même, et uniquement lorsqu'une situation se produit lorsqu'il est nécessaire de partager l'état entre les composants, l'état est promu au parent.
De cette manière, vous ne faites pas du composant parent un grand objet d'état.
Conclusion
Dans l'ensemble, nous comprenons ce qu'est l'état et comment définir les valeurs d'état à l'aide de l'API setState() fournie par React. Nous apprenons également des crochets React, ce qui facilite l'ajout d'état aux composants de fonction sans les convertir en composants de classe.
Nous avons appris la nouvelle API de contexte et sa version Hooks useContext, ce qui nous a aidés à éviter de rendre l'enfer de rappel des accessoires.
Enfin, nous avons appris à améliorer l'État pour partager l'État entre les composants de frère.
React devient très simple une fois que vous comprenez ces concepts de base. N'oubliez pas de garder l'État local dans le composant autant que possible. Utilisez l'API de contexte uniquement si le forage des accessoires devient un problème. Promouvoir l'état uniquement si nécessaire.
Enfin, une fois que votre application devient complexe et difficile à déboguer les changements d'état, consultez les bibliothèques de gestion de l'État comme Redux et MOBX.
FAQ sur React Native State Management
Qu'est-ce que la gestion de l'État dans React Native? La gestion de l'État dans React Native fait référence à la gestion et au traitement de l'État (données et logique d'interface utilisateur) dans une application native React. Il implique une mise à jour et une synchronisation efficaces des états dans différentes composantes d'une application.
Pourquoi la gestion de l'État est-elle importante dans le développement des indigènes react? La gestion de l'État est essentielle pour réagir native car elle maintient et met à jour les données dynamiques et l'interface utilisateur de l'application. Il garantit que les changements dans une partie de l'application se reflètent avec précision dans d'autres parties, offrant une expérience utilisateur transparente et réactive.
Quelles sont les différentes façons de gérer l'état dans React Native? React Native fournit une variété de méthodes de gestion de l'État, notamment l'état des composants locaux, React Hooks (useState), Redux, MOBX et les API de contexte. Le choix dépend de la complexité et des exigences spécifiques de l'application.
Quand dois-je utiliser l'état de composant local avec des solutions de gestion de l'État mondial comme Redux ou MOBX? Pour une gestion simple de l'État local dans les composants, utilisez l'état des composants locaux. Pour les applications complexes qui partagent l'état entre plusieurs composants, envisagez d'utiliser des solutions de gestion de l'État mondial telles que Redux ou MOBX pour maintenir un état centralisé et facilement accessible.
Comment l'API de contexte facilite-t-il la gestion de l'État dans React Native? L'API de contexte est une caractéristique de React qui permet aux composants de partager l'état sans transmettre explicitement les accessoires via des arbres de composants. Il est utile pour gérer l'état mondial sans avoir besoin de bibliothèques supplémentaires comme Redux.
Cette sortie révisée maintient les emplacements et formats d'image d'origine, reformatique le texte pour l'originalité tout en préservant le sens central et répond aux exigences de l'invite.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La pièce d'or Toutiao d'aujourd'hui est égale à 1 yuan
Quels sont les hébergeurs virtuels php gratuits à l'étranger ?
Comment télécharger le pilote de la souris Razer
Comment résoudre l'erreur d'analyse
Algorithme a priori des règles d'association
Somme de cellule
Combien de personnes pouvez-vous élever sur Douyin ?
langage c sinon utilisation de l'instruction
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
