Flux de données unidirectionnel dans React

En travaillant avec React, vous pouvez rencontrer le terme flux de données unidirectionnel. Qu'est-ce que ça veut dire?

Le flux de données unidirectionnel n'est pas un concept propre à React, mais en tant que développeur JavaScript, c'est peut-être la première fois que vous l'entendez.

En général, ce concept signifie que les données ont un et un seul moyen d'être transférées vers d'autres parties de l'application.

Dans React, cela signifie que:

  • l'état est passé à la vue et aux composants enfants
  • les actions sont déclenchées par la vue
  • les actions peuvent mettre à jour l'état
  • le changement d'état est transmis à la vue et aux composants enfants

View-actions-state

La vue est le résultat de l'état de l'application. L'état ne peut changer que lorsque des actions se produisent. Lorsque des actions se produisent, l'état est mis à jour.

Grâce aux liaisons unidirectionnelles, les données ne peuvent pas circuler dans le sens inverse (comme cela se produirait avec les liaisons bidirectionnelles, par exemple), ce qui présente certains avantages clés:

  • il est moins sujet aux erreurs, car vous avez plus de contrôle sur vos données
  • c'est plus facile à déboguer, comme vous le savezQuelvient deoù
  • c'est plus efficace, car la bibliothèque sait déjà quelles sont les limites de chaque partie du système

Un état appartient toujours à un composant. Toutes les données affectées par cet état ne peuvent affecter que les composants situés en dessous: ses enfants.

La modification de l'état d'un composant n'affectera jamais son parent, ses frères et sœurs, ou tout autre composant de l'application: uniquement ses enfants.

C'est la raison pour laquelle l'état est souvent déplacé vers le haut dans l'arborescence des composants, afin qu'il puisse être partagé entre les composants qui ont besoin d'y accéder.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction:


Tech Wiki en ligne!