Props (Short for « Properties »)

Liens_Web:
Props

“Props” est un mot clef spécial en React qui représente les propriétées. Il est utilisé pour transmettre des données (propriétés) d’un composant à un autre.

Les propriétés ne sont transmisent que dans un sens : du composant parent vers le composant enfant. On parle de “uni-directionnal flow”. Les data transmisent par les props sont en lectures seules. Cela signifie que les data ne doivent pas être changées par le composant enfant. Si une données doit changer d’état ou de valeur, il faut passer une fonction « callback » en tant que props. Ce callback sera lui capable de faire évoluer les states.

Utilisation des Props

Il faut se rappeler que les props sont des arguments passés aux composants. Ces arguements sont fournis par le composant parent et passés aux composants enfants.

On peut résumer l’utilisation des props en 3 étapes:

  1. On définie un attribut et sa valeur (Data) sous la forme d’un Objet JavaScript (Dictionnaire) : {Attribut: Value}.

  2. On passe cet attribue à un composant enfant en utilisant “props”.

  3. On effectue le rendu de la data du props.

Les props sont en lecture seule

Une fonction est dite « pure » si elle ne tente pas de modifier ses entrées et retourne toujours le même résultat avec les même entrées.

1 // Une fonction pure (qui ne modifie pas ces propres entrées)
2 function sum(a, b) {
3     return a + b;
4 }
5
6 // Une fonction impure (qui modifie ces propres entrées)
7 function withdraw(account, amout) {
8     account.total -= amount;
9 }