Concept de réaction: immuabilité

Qu'est-ce que l'immuabilité? Et comment s'intègre-t-il dans le monde React?

Un concept que vous rencontrerez probablement lors de la programmation dans React est l'immuabilité (et son contraire, la mutabilité).

C'est un sujet controversé, mais quoi que vous pensiez du concept d'immuabilité, React et la plupart de son écosystème le forcent, vous devez donc au moins comprendre pourquoi c'est si important et ses implications.

En programmation, une variable est immuable lorsque sa valeur ne peut pas changer après sa création.

Vous utilisez déjà des variables immuables sans le savoir lorsque vous manipulez une chaîne. Les chaînes sont immuables par défaut, lorsque vous les modifiez en réalité, vous créez une nouvelle chaîne et lui attribuez le même nom de variable.

Une variable immuable ne peut jamais être modifiée. Pour mettre à jour sa valeur, vous créez une nouvelle variable.

La même chose s'applique aux objets et aux tableaux.

Au lieu de changer un tableau, pour ajouter un nouvel élément, vous créez un nouveau tableau en concaténant l'ancien tableau, plus le nouvel élément.

Un objet n'est jamais mis à jour, mais copié avant de le modifier.

Cela s'applique à React dans de nombreux endroits.

Par exemple, vous ne devez jamais faire muter lestatepropriété d'un composant directement, mais uniquement via lesetState()méthode.

DansRedux, vous ne modifiez jamais l'état directement, mais uniquement via des réducteurs, qui sont des fonctions.

La question est, pourquoi?

Il y a plusieurs raisons, dont les plus importantes sont:

  • Les mutations peuvent être centralisées, comme dans le cas de Redux, ce qui améliore vos capacités de débogage et réduit les sources d'erreurs.
  • Le code semble plus propre et plus simple à comprendre. Vous ne vous attendez jamais à ce qu'une fonction change une valeur sans que vous le sachiez, ce qui vous donneprévisibilité. Lorsqu'une fonction ne mute pas les objets mais renvoie simplement un nouvel objet, on l'appelle une fonction pure.
  • La bibliothèque peut optimiser le code car, par exemple, JavaScript est plus rapide lors du remplacement d'une ancienne référence d'objet par un objet entièrement nouveau, plutôt que de muter un objet existant. Cela vous donneperformance.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: