Maîtriser les States et les Props de React

Par jpatel, 2 mars, 2024

Bienvenue dans la quatrième étape de notre exploration approfondie de React.js ! Après avoir établi les fondamentaux avec le DOM virtuel et les composants, plongeons maintenant dans les détails pratiques de la création, de l'utilisation des composants, ainsi que dans la gestion des états et des props.

States de React :

Dans React, "States" fait référence aux états. Les états sont un concept fondamental qui représente la condition ou la situation actuelle d'un composant. Chaque composant React peut avoir un état, un objet JavaScript mutable qui détermine comment le composant est rendu et se comporte. Ces états contiennent des données en temps réel ou des informations sur la page web, et ils peuvent être mis à jour pendant le cycle de vie du composant. En d'autres termes, l'état d'un composant est un objet qui détient des informations pouvant changer tout au long

Props : La Communication Entre Composants :

Les props (propriétés) représentent un autre concept essentiel dans React, permettant la transmission de données d'un composant parent à un composant enfant. Elles jouent un rôle crucial dans la communication et le partage d'informations entre différentes parties d'une application React.

Bien qu'elles présentent une similitude apparente avec les états, il est crucial de noter que les props et les états demeurent des concepts distincts. Les props sont immuables, signifiant qu'une fois définies, elles demeurent inchangées du côté du composant enfant. En revanche, les états sont des objets observables, adaptés pour contenir des données évolutives au fil du temps, influençant le comportement du composant à chaque modification.

Dans un composant fonctionnel, les composants reçoivent des props exactement comme un argument ordinaire de fonction. Un composant fonctionnel recevra l'objet props avec les propriétés que vous avez décrites dans l'appel du composant :

function App() {
return <Greeting name="Nathan" age={27} occupation="Software Developer" />;
}

function Greeting(props) {
return (
<p>
Salut ! Je m'appelle {props.name}, j'ai {props.age} ans et je suis {props.occupation}.
Enchanté de vous rencontrer !
</p>
);
}

ReactDOM.render(<App />, document.getElementById("root"));

Outre la transmission de plusieurs props en une seule fois, dans cet exemple, vous constatez également que la prop age est de type nombre. Cela démontre que vous pouvez transmettre n'importe quel type de données disponible en JavaScript, tel que le nombre, le booléen ou l'objet, via les props. C'est ainsi que les props vous permettent d'envoyer des données en utilisant l'approche descendante, où un composant à un niveau supérieur peut envoyer des données à un composant situé en dessous de lui

Mise à jour du State dans React :

Lorsqu'il s'agit de mettre à jour l'état dans React, il est essentiel de prendre en compte les scénarios potentiels où plusieurs mises à jour de setState() peuvent se produire simultanément. Dans de tels cas, se fier à la valeur actuelle de l'état peut ne pas toujours donner le résultat souhaité. Explorons cela avec un exemple impliquant le suivi d'un compteur, tel que le nombre de "j'aime" sur un message.

Voici une approche incorrecte que les développeurs pourraient utiliser involontairement :

this.setState({ counter: this.state.count + this.props.diff });

Pour garantir des mises à jour d'état précises, il est crucial d'utiliser la méthode correcte. Dans l'extrait de code suivant, nous exploitons le format de fonction fléchée ES6, qui prend l'état précédent et les propriétés (props) du composant en tant que paramètres tout en mettant à jour le compteur. La même logique peut être exprimée avec l'approche fonctionnelle par défaut :

this.setState((prevState, props) => ({counter: prevState.count + props.diff }));

En adoptant cette approche, React peut gérer et synchroniser efficacement les mises à jour d'état, fournissant un mécanisme fiable pour maintenir l'intégrité des données de votre application.

En résumé, notre exploration des concepts fondamentaux des États et des Props dans React.js a souligné leur rôle essentiel dans la création d'interfaces réactives. Les États gèrent la condition d'un composant, tandis que les Props facilitent la communication entre eux. En mettant en lumière l'importance de la mise à jour des états, nous avons préparé le terrain pour notre prochaine étape : plonger dans le Cycle de Vie des composants, une exploration qui promet d'optimiser les performances et d'approfondir notre compréhension de React.js. Préparez-vous pour cette nouvelle phase captivante de notre parcours !