Props vs States in React

•

Quelle est la différence entre les states et les props en React 🤔 ? C'est une des questions que je reçois souvent ❓ J'ai pris du temps mais... Voici la meilleure réponse que je pouvais vous donner ! 👇 Imagine que tu construis une maison en Lego...

Vous allez devoir commander des Legos ! Les legos ont deux paramètres : • La couleur • La taille Pour faire tes commandes, tu pourras spécifier cette couleur et cette taille

Ce que je te présente là, c'est les props ! Les props vont permettre de spécifier au "Lego Component" (un composant React) quel UI il va afficher ! Ici, c'est notre Lego ! Ce qu'il faut bien comprendre c'est que notre Composant va juste réagir aux props qu'on lui donne

Le Component ne peut pas modifier ses props, c'est un peu comme des paramètres à notre composant ! Mais alors... c'est quoi les states ?

Les states, ça représenterait plus la "mémoire interne" de notre composant. Sur chaque Lego, il y a un bouton qui lors du clique incrémente le counter.

Le counter est entièrement géré à l'intérieur de notre Lego, comme si notre Lego avait un mini disque dur qui va incrémenter lors du clique. Cette fois, notre composant peut modifier cette donnée et s'afficher différemment !

C'est un peu comme une mémoire interne de notre composant. Les props, eux, sont des sortes de paramètres.

Du point de vue de ton composant, un state : • Est géré en interne • Peut être modifié Alors qu'une props : • Est donnée en paramètre • Ne peut pas être modifiée

Maintenant que tu as compris la différence entre props et state, intéressons-nous à un petit edge case ! Comme tu le vois ici, notre Lego change de forme et de taille ! Pourtant on a dit que les props ne sont pas "modifiables" mais ici ça fonctionne 🤯

Ce qui se passe ici, c'est que les deux selects au-dessus *sont des states ! Mais ils sont gérés dans le parent component. Donc le "LegoTester" (ce que tu vois sur le screen ci-dessus) possède une mémoire interne qu'il passe ensuite en props à notre enfant !

Je présente ceci, car je sais que ce genre de pattern peut perturber au début ! On a des states qui sont passés en props ce qui rend le composant dynamique ! J'espère que ce thread t'a aidé :

Go check la vidéo pour des explications plus longue : youtu.be/TMm8dYD5syc