Vous êtes curieux de connaître React et souhaitez en maîtriser les subtilités ? Vous avez peut-être déjà suivi des tutoriels par le passé, mais avez eu du mal à comprendre les concepts fondamentaux de « State » ? Vous cherchez peut-être un framework pour votre projet ?
React.js est l’une des bibliothèques JavaScript les plus populaires au monde, créée par Facebook en 2013. Elle est particulièrement adaptée aux applications monopages avec du contenu dynamique et aux Progressive Web Apps. En fait, c’est un excellent choix pour tout type de développement web nécessitant la création de solutions rapides, évolutives et maintenables.
Si vous souhaitez développer une plateforme e-commerce, une application de livraison de nourriture, un outil d’analyse, un messager, ou une application d’entreprise, React.js est la solution idéale pour vous.
Si vous connaissez déjà React.js, vous pouvez facilement maîtriser le framework React Native qui permet de développer des applications mobiles et d’offrir des expériences natives pour les utilisateurs d’iOS et d’Android.
Il est utilisé par des sites tels que Facebook, Instagram, Netflix et le New York Times. En utilisant React, nous obtenons une grande vitesse, une facilité d’évolutivité et de développement. Dans cet article, nous allons analyser le « State », l’un des aspects importants de React.js.
Sommaire :
- Qu’est-ce que le State ?
- Initialisation du State
- Travail avec le State
- Utilisation de prevState
Qu’est-ce que le State dans React.js ?
Le State dans React.js est un objet JavaScript standard dont le but principal est l’interactivité, nécessaire à la correction et à la transmission des données, qui peuvent être modifiées après un certain temps. La modification du State dépend de la fonctionnalité de l’application. Les modifications peuvent être basées sur la réponse des utilisateurs, de nouveaux messages côté serveur, la réponse du réseau, etc. La seule exigence de React concernant le State est le type de données : il doit s’agir d’un objet. L’application définit ce qui est stocké à l’intérieur.
Initialisation du State
L’initialisation du State n’est exécutée qu’au sein des composants basés sur des classes, qui sont des composants « stateful » (avec un State interne).
Il existe deux options pour initialiser le State dans React.js :
1) Dans le constructeur
this.state = { ... }
Gardez à l’esprit que le state est une propriété des composants de classe, et après la création de la classe d’un composant, la première méthode appelée est le constructeur, qui est un endroit idéal pour initialiser le State et tout le reste.
Un exemple de classe sera également créé en mémoire, et vous pourrez utiliser son `this` pour installer des propriétés `this.state` = (ligne 7). Le constructeur est le seul endroit où vous pouvez écrire par signe égal.
Il est également important d’appeler `super(props)` (ligne 5), le constructeur de la classe de base. Ce constructeur appelle par défaut `super` avec tous les arguments passés.
2) Directement dans la classe
state = { ... }
Au moment de la rédaction de cet article, la deuxième option pour initialiser le State ne fait pas partie des spécifications officielles de JS. Nous avons donc besoin de Babel – Stage 3 pour l’exécuter.
Dans ce cas, il n’y a pas de constructeur. La référence au State s’effectue directement. La zone visuelle se trouve à l’intérieur de la classe mais pas à l’intérieur de la méthode, et vous pouvez accéder à `this.props`, `this.state`.
Laquelle choisir ?
C’est à vous de décider. Nous préférons la deuxième option.
Travail avec le State
Notre State contient un objet avec deux champs : firstName et lastName. Quelle que soit l’option que nous utilisons pour l’initialiser, nous y ferons référence via `this.state.nameState`. Nous pouvons le faire dans les méthodes du cycle de vie du composant ou dans les méthodes que nous écrirons pour notre classe.
Dans l’exemple ci-dessous, avec la méthode render(), importons les données du state :
Les développeurs écrivent généralement du code plus précis en utilisant (ES6) pour le State :
Un tel code donnera le résultat suivant :
Gestion du State à l’aide de setState()
Pour gérer le State, React fournit une méthode spéciale `setState()`. Nous devons prêter attention à son fonctionnement. Nous proposons un objet contenant une partie des informations que nous souhaitons mettre à jour. Au début, les valeurs de l’objet transmis seront égales aux valeurs du State du composant, puis `setState()` mettra à jour ou ajoutera de nouvelles valeurs au State.
Par exemple, nous allons ajouter un bouton, et en cliquant dessus avec la méthode handleClick, nous allons modifier le state :
Après l’appel de la méthode handleClick, une méthode `this.setState({ firstName : ‘Michael’ })` est appelée à l’intérieur, où la valeur de firstName est modifiée en ‘Michael’. Ensuite, React fusionne le state existant avec l’objet passé à `setState()`.
setState applique uniquement la partie du State qui doit être modifiée. Ce nouvel objet vient se superposer au State existant. C’est une fonctionnalité très pratique de React qui protège contre les erreurs et permet d’écrire du code plus propre.
Ensuite, setState lance le processus de synchronisation avec le DOM, crée un nouvel arbre d’éléments du ReactDOM virtuel, le compare avec l’arbre d’éléments précédent, et définit enfin ce qui s’est passé et comment l’exécuter de la meilleure façon. Ensuite, le DOM final est mis à jour dans le navigateur, et nous obtenons First Name : Michael.
Utilisation de prevState
Pour comprendre ce qu’est prevState, créons un composant avec une seule case à cocher. Lorsque nous cliquons dessus, son attribut sera modifié pour être coché/décoché.
À première vue, il semble logique de changer dans `setState` de false à true avec un point d’exclamation et vice versa, comme dans l’exemple ci-dessous :
Mais c’est une erreur. Il est très important de comprendre que dans certains cas, la méthode `setState()` fonctionne de manière asynchrone. Pas toujours, mais dans certains cas. Il est donc acceptable de considérer que le State n’est pas installé instantanément et peut l’être après un certain temps. Ainsi, lorsqu’un utilisateur clique sur la case à cocher et que nous appelons handleClick, la valeur de `this.state` peut ne pas être mise à jour. React le fait pour optimiser les performances. React peut effectuer une seule mise à jour de l’état d’une application pour plusieurs appels de `setState()` pendant l’optimisation des performances. En d’autres termes, nous ne pouvons pas nous attendre à ce que notre State représente sa dernière version.
Pour corriger cela, nous devons appeler `setState` d’une autre manière, sinon, au lieu de passer un nouvel état que nous voulons mettre à jour, nous transmettrons une autre fonction à `setState` qui reçoit notre State actuel, `this.setState(( prevState ) => {})`. Ce sera un signal pour React que ce `setState` doit être exécuté uniquement lorsque notre State actuel sera dans son état final et prêt à calculer le nouvel état.
Lorsque vous calculez un nouveau State, utilisez toujours une option avec une fonction dépendant du State actuel.
Modifions notre méthode handleClick comme indiqué dans l’exemple ci-dessous, et tout fonctionnera correctement :
Conclusions :
- Le state d’un composant est contenu dans le champ State ;
- `this.state` est initialisé dans le constructeur ou le corps de classe ;
- Après initialisation, le State ne peut pas être modifié (lecture seule) ;
- Pour mettre à jour le State, utilisez la méthode `setState()` ;
- Dans `setState()`, il faut transmettre uniquement ce qui a été modifié dans le State ;
- La mise à jour du State qui dépend de la précédente doit être effectuée via la fonction `setState`.
Nous espérons que cet article vous a aidé à comprendre ce qu’est le state et comment l’utiliser.
À propos de Redwerk
Nous sommes une société de développement logiciel offshore qui a excellé dans la création d’applications web, mobiles et de bureau à travers de nombreux langages de programmation, y compris React. Notre spécialisation principale couvre l’e-commerce, l’automatisation des entreprises, la santé électronique, les médias et le divertissement, l’e-gouvernement, le développement de jeux, les startups et l’innovation. Redwerk a livré avec succès des centaines de projets variés à des clients du monde entier. Avec une passion pour la perfection, nous suivons constamment les innovations de l’industrie informatique et les appliquons dans notre travail.
