Gestion des états dans React Native –

La gestion de l’état est l’un des concepts les plus difficiles à appréhender lors de l’apprentissage de React Native car il existe de nombreuses façons de le faire. Le registre npm contient d'innombrables bibliothèques de gestion d'état – telles que Redux – et d'innombrables bibliothèques sont construites au-dessus d'autres bibliothèques de gestion d'état pour simplifier la bibliothèque d'origine elle-même – comme Redux Easy . Toutes les semaines, une nouvelle bibliothèque de gestion d'état est introduite dans React, mais les concepts de base du maintien de l'état de l'application sont restés les mêmes depuis l'introduction de React.

Le moyen le plus courant de définir un état dans React Native consiste à utiliser le logiciel React Méthode setState () . Nous avons également l'API de contexte pour éviter le forage d'accessoires et transmettre l'état à plusieurs niveaux sans le transmettre aux enfants individuels de l'arbre.

Récemment, Hooks est apparu dans React à v16.8.0 qui est un nouveau modèle pour simplifier l'utilisation de l'état dans React. React Native l’a obtenu dans v0.59 .

Dans ce didacticiel, nous allons en apprendre davantage sur l’état actuel et sur la méthode setState () l’API de contexte et Crochets de réaction. C’est le fondement de la définition de l’état dans React Native. Toutes les librairies sont construites sur les concepts de base ci-dessus. Ainsi, une fois que vous maîtriserez ces concepts, comprendre une bibliothèque ou créer votre propre bibliothèque de gestion d'état sera simple.

Vous voulez apprendre à réagir à React Native? Cet article est un extrait de notre bibliothèque Premium. Obtenez une collection complète de livres natifs de React couvrant les bases, les projets, les astuces, les outils, etc., avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 dollars par mois .

Qu'est-ce qu'un état?

Tout ce qui change au fil du temps s'appelle state . Si nous avions une application Counter, l'État serait le compteur lui-même. Si nous avions une application à faire, la liste des tâches changerait avec le temps, de sorte que cette liste serait l'état. Même un élément d'entrée est en quelque sorte un état, au fil du temps, au fur et à mesure que l'utilisateur le saisit.

Intro to setState

Maintenant que nous savons quel est l'état, comprenons comment React le stocke.

Envisagez une application de compteur simple:

 import Réagissez à partir de 'réagir'
importer {Text, Button} de 'react-native'

classe Counter étend React.Component {
    state = {
        compteur: 0
    }

    render () {
        const {counter} = this.state
        revenir (
            <>
                 {counter} 
                  {}} title = "Incrément" />
                 {}} title = "Décrémenter" />
            
        )
    }
}

Dans cette application, nous stockons notre état à l'intérieur du constructeur dans un objet et l'attribuons à this.state .

N'oubliez pas que l'état ne peut être qu'un objet. Vous ne pouvez pas stocker directement un numéro. C'est pourquoi nous avons créé une variable counter à l'intérieur d'un objet.

Dans la méthode render nous avons déstructuré la propriété counter de this.state et le rendre à l'intérieur d'un h1 . Notez qu'actuellement, il ne montrera qu'une valeur statique ( 0 ).

Vous pouvez également écrire votre état en dehors du constructeur de la manière suivante:

 import Réagissez à partir de 'react'
importer {Text, Button} de 'react-native'

classe Counter étend React.Component {
    state = {
        compteur: 0
    }

    render () {
        const {counter} = this.state
        revenir (
            <>
                 {counter} 
                  {}} title = "Incrément" />
                 {}} title = "Décrémenter" />
            
        )
    }
}

Supposons maintenant que nous voulions que les boutons + et - fonctionnent. Nous devons écrire du code dans leurs gestionnaires respectifs onPress :

 import Réagissez à partir de 'react'
importer {Text, Button} de 'react-native'

classe Counter étend React.Component {
    state = {
        compteur: 0
    }

    render () {
        const {counter} = this.state
        revenir (
            <>
                 {counter} 
                  {this.setState ({counter: counter + 1})}} title = "Incrément" />
                 {this.setState ({counter: counter - 1})}} title = "Décrémenter" />
            
        )
    }
}

Maintenant, lorsque vous cliquez sur les boutons + et - React restitue le composant. En effet, la méthode setState () a été utilisée.

La méthode setState () restitue la partie de l'arbre modifiée. Dans ce cas, il refait le h1 .

Donc, si on clique sur + il incrémente le compteur de 1. Si on clique sur - il diminue le compteur de 1.

N'oubliez pas que vous ne pouvez pas modifier directement l'état en modifiant this.state ; this.state = counter + 1 ne fonctionnera pas.

De plus, les changements d'état sont des opérations asynchrones, ce qui signifie que si vous lisez this.state immédiatement après l'appel this.setState elle ne reflétera pas les modifications récentes.

C'est ici que nous utilisons la syntaxe «function as a callback» pour setState () comme suit:

 import Réagissez depuis 'réagir'
importer {Text, Button} de 'react-native'

classe Counter étend React.Component {
    state = {
        compteur: 0
    }

    render () {
        const {counter} = this.state
        revenir (
            <>
                 {counter} 
                  {this.setState (prevState => ({counter: prevState.counter + 1}))}} title = "Incrément" />
                 {this.setState (prevState => ({counter: prevState.counter - 1}))}} title = "Décrémenter" />
            
        )
    }
}

La syntaxe “function as a callback” fournit la méthode récente - en l'occurrence prevState - en tant que paramètre de la méthode setState () .

changements récents dans l'état.

Que sont les crochets?

Les crochets sont un nouvel ajout à React v16.8 . Auparavant, vous ne pouviez utiliser l'état qu'en créant un composant de classe. Vous ne pouvez pas utiliser l'état dans un composant fonctionnel lui-même.

Grâce à l'ajout de Hooks, vous pouvez utiliser l'état dans le composant fonctionnel lui-même.

Convertissons notre composant de classe Counter ci-dessus en un . ] Composant fonctionnel du compteur et utilisation des crochets à réaction:

 import Réagissez à partir de 'réagir'
importer {Text, Button} de 'react-native'

Const Counter = () => {
    const [ counter, setCounter ] = React.useState (0)
    revenir (
        <>
             {counter} 
              {setCounter (counter + 1)}} title = "Incrément" />
             {setCounter (counter - 1)}} title = "Décrémenter" />
        
    )
}

Notez que nous avons réduit notre composant de classe de 18 à 12 lignes de code. De plus, le code est beaucoup plus facile à lire.

Revoyons le code ci-dessus. Tout d’abord, nous utilisons la méthode intégrée de React useState . useState 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, à la différence de setState () qui ne peut avoir un objet.

Dans notre exemple de compteur, il prend un nombre et renvoie un tableau avec deux valeurs.

La première valeur du tableau est la valeur d'état en cours. Donc le compteur vaut 0 actuellement

La deuxième valeur du tableau est la fonction qui vous permet de mettre à jour la valeur d'état.

Dans notre onPress . , nous pouvons ensuite mettre à jour le compteur en utilisant directement setCounter directement à l'aide de .

Notre fonction d'incrémentation devient ainsi setCounter (compteur + 1) et notre fonction de décrémentation devient . setCounter (counter - 1) .

React dispose de nombreux crochets intégrés, tels que use State useEffect useContext . useCallback useMemo useFree [19459109] useLayoutEffect ] - sur lequel vous trouverez plus d’informations dans les documents Les câbles React Hooks .

De plus, nous pouvons créer notre propre Custom Hooks .

Il existe deux règles à suivre lors de la construction ou de l’utilisation de crochets:

1. Seuls les crochets d’appel du dernier niveau . N’appelez pas Crochets dans des boucles, des conditions ou des fonctions imbriquées. Au lieu de cela, utilisez toujours Crochets au plus haut niveau de votre fonction React. En respectant cette règle, vous vous assurez que les crochets sont appelés dans le même ordre à chaque rendu d'un composant. C’est ce qui permet à React de préserver correctement l’état des crochets entre plusieurs appels useState et useEffect .

2. Seuls les crochets d’appel à partir des fonctions React . N’appelez pas Hooks à partir de fonctions JavaScript classiques. Vous pouvez à la place appeler les composants fonctionnels de React ou Hooks à partir de crochets personnalisés.

En respectant cette règle, vous vous assurez que toute la logique avec état d'un composant est clairement visible à partir de son code source.

Les crochets sont vraiment simples. comprendre, et ils sont utiles lors de l'ajout d'un état à un composant fonctionnel.

L'API de contexte

Le contexte fournit un moyen de transmettre des données à travers l'arborescence des composants sans avoir à transmettre manuellement les accessoires à tous les niveaux.

Dans une application React Native typique, les données sont transmises de haut en bas via des accessoires. S'il existe plusieurs niveaux de composants dans l'application React et que le dernier enfant de l'arborescence des composants souhaite extraire les données du parent le plus haut, vous devez alors transmettre les accessoires individuellement.

Prenons un exemple ci-dessous. Nous voulons faire passer la valeur du thème thème du composant App au composant Pic . Généralement, sans utiliser Context, nous le transmettons à chaque niveau intermédiaire comme suit:

 const App = () => (
    <>
        
        
    
)

const Accueil = () => (
    <>
        
        
    
)

const Profile = () => (
    <>
        
        
    
)

La valeur du thème va de App -> Accueil -> Profil -> Image . Le problème ci-dessus est connu sous le nom de forage de forage .

Il s'agit d'un exemple trivial, mais considérons une application du monde réel comportant des dizaines de niveaux différents.

Il devient difficile de transmettre des données. chaque enfant juste pour qu'il puisse être utilisé dans le dernier enfant. Par conséquent, nous avons un contexte.

Le contexte nous permet de transmettre directement les données de App -> Pic .

Voici comment procéder à l'aide de l'API de contexte:

 importer Réagir de 'réagir'

const ThemeContext = React.createContext ("light") // définit light par défaut

const App = () => (
    
        
        
    
)

const Accueil = () => (
    <>
        
        
    
)

const Profile = () => (
    
        {thème => (
            
            
        )}
    
)

Tout d'abord, nous créons ThemeContext à l'aide de l'API React.createContext . Nous avons défini la valeur par défaut de light .

Ensuite, nous encapsulons l'élément racine de notre composant App avec ThemeContext.Provider tandis que le thème est fourni . ] comme un accessoire

Enfin, nous utilisons ThemeContext.Consumer comme rendre un accessoire pour obtenir le thème comme dark .

Le motif de rendu proposé est agréable, mais si nous avons plusieurs contextes, cela pourrait donner lieu à un enfer de rappel. Pour éviter le rappel, nous pouvons utiliser Hooks au lieu de ThemeContext.Consumer .

La seule chose que nous devons changer est le détail du composant Profile :

 const. Profil = () => {
    const theme = React.useContext (ThemeContext)
    retour (<>
            
            
         
    )
}

Ainsi, nous n’avons pas à nous préoccuper de l’enfer de rappel.

Partage d’État entre composants

Jusqu’à présent, nous n’avions géré l’état que dans le composant lui-même. Nous allons maintenant voir comment gérer l’état entre les composants.

Supposons que nous créons une application simple pour la liste des tâches comme suit:

 import {View, Text} à partir de 'react-native'

const App = () => (
    <>
        
        
    
)

const TodoList = ({todos}) => (
    
        {todos.map (todo => (
            
                {faire}
            )
        )}
    
)

Maintenant, si nous voulons ajouter un composant à ajouter à la composante AddTodo comment apparaît-il dans le composant de TodoList todos ? La réponse est «lever l'état vers le haut».

Si deux composants frères veulent partager l'état, alors l'état doit être élevé vers le composant parent. L'exemple complété devrait ressembler à ceci:

 import {View, Text, TextInput, Button} from 'react-native'

const App = () => {
    const [ todos, setTodos ] = React.useState ([])
    revenir (
        <>
             setTodos ([...todos, todo])} />
            
        
    )
}

const AddTodo = ({addTodo}) => {
    const [ todo, setTodo ] = React.useState ('')
    revenir (
        <>
             setTodo (valeur)} />
             {
                    addTodo (todo)
                    setTodo ('')
                }}
            />
        
    )
}

const TodoList = ({todos}) => (
    
        {todos.map (todo => (
            
                {faire}
            )
        )}
    
)

Ici, nous conservons l'état dans le composant App . Nous utilisons l'outil React Hook useState pour stocker todos sous forme de tableau vide.

Nous passons ensuite la méthode addTodo à la AddTodo . Composant et le tableau todos au composant TodoList .

Le composant AddTodo utilise la méthode addTodo comme accessoire. Cette méthode doit être appelée une fois que vous avez appuyé sur le bouton .

Nous avons également un élément TextInput qui utilise également le crochet de réaction useState . modification de la valeur de TextInput .

Dès que vous appuyez sur le bouton nous appelons la méthode addTodo qui est transmise à partir de l'application mère . ]. Cela permet d’ajouter le todo à la liste des todos . Et plus tard, nous videons la boîte TextInput .

Le composant TodoList prend en charge todos et restitue la liste des éléments à activer .

Vous pouvez également essayer de supprimer une tâche à faire pour vous entraîner à lever vous-même. Voici la solution:

 const App = () => {
    const [ todos, setTodos ] = React.useState ([])
    revenir (
        <>
             setTodos ([...todos, todo])} />
             setTodos (todos.filter (t => t! == todo))} />
        
    )
}

const TodoList = ({todos, deleteTodo}) => (
    
        {todos.map (todo => (
            
                {todo}  deleteTodo (todo)} />
            )
        )}
    
)

Il s'agit de la pratique la plus courante dans React. La levée des états n'est pas aussi simple qu'il y paraît. C’est un exemple simple, mais dans une application réelle, nous ne savons pas quel état sera nécessaire pour que son parent soit utilisé par un composant frère. Dans un premier temps, gardez donc l'état dans le composant lui-même et, lorsqu'une situation se présente, vous devez partager l'état entre les composants, puis ne remontez que l'état jusqu'au parent.

De cette manière, vous ne faites pas de votre composant parent un grand objet d'état.

Conclusion

En résumé, nous avons examiné l'état et la définition de la valeur de l'état à l'aide de l'API setState () fourni par React. Nous avons également examiné Reag Hooks, qui permet d'ajouter facilement un état à un composant fonctionnel sans avoir à le convertir en composant de classe.

Nous avons découvert la nouvelle API de contexte et sa version de Hooks useContext . ce qui nous aide à rester à l’écart du rendu de rappel de prop prop.

Enfin, nous avons appris comment lever un état pour partager l’état entre des composants frères.

Réagir devient très simple une fois que vous avez compris ces concepts de base. N'oubliez pas de conserver l'état le plus local possible pour le composant. Utilisez l'API de contexte uniquement lorsque le forage d'accessoires devient un problème.

Enfin, vérifiez les bibliothèques de gestion d'état telles que Redux et MobX une fois que votre application devient complexe et qu'il est difficile de corriger les modifications d'état. ] Akshay est un créateur, artiste informatique et micropreneur de Mumbai.