Tombons amoureux de React Fiber

TLDR, React Fiber est un changement de moteur interne qui permet à React de dépasser les limites de la pile d'appels. Sa création permet à React de mettre en pause / démarrer le travail de rendu à volonté. À terme, les utilisateurs de React pourront faire allusion à la «priorité» du travail.

Actuellement, nous ne pouvons pas directement interagir avec lui, alors pourquoi devrions-nous nous en soucier? Parce que c'est vraiment cool!

Réagir avant Fiber était comme travailler dans une entreprise au rythme rapide sans git.

Imaginez être au milieu d'une énorme fonctionnalité et que votre patron a besoin d'un correctif, pronto. Vous ne pouvez pas arrêter de travailler car toutes vos modifications sont dans un seul fichier, vous vous engagez à terminer ce travail.

Si nous utilisions git, nous serions en mesure de valider notre travail dans une branche et de passer à une branche de correctif rapide.

Avec Fiber, React peut faire une pause et reprendre le travail à volonté pour travailler sur ce qui compte le plus rapidement possible! ?

React Internals en un mot?

Vous créez une arborescence de composants. React prend cet arbre, le parcourt et crée un modèle virtuel du résultat final. Peut-être que vous effectuez un rendu vers le DOM, peut-être que vous ciblez natif. À ce stade, cela n'a pas d'importance pour React.

Désormais, au fur et à mesure que votre application se mettra à jour, React effectuera ce processus de création du résultat virtuel encore et encore. À chaque fois, il compare l'arborescence virtuelle précédente à la suivante.

À ce stade, nous devenons dépendants de la plate-forme. Si vous effectuez un rendu dans le DOM, il se peut qu'une seule classe sur un élément ait changé. React parcourra l'arborescence virtuelle, trouvera ce qui a changé et se mettra à jour aussi peu que possible.

Cela pourrait signifier la mise à jour d'un attribut de classe, ou cela pourrait signifier détruire tout le DOM. C'est la réconciliation.

Avant Fiber, c'était ça. Le travail a été aménagé et le moteur de rendu de choix s'est mis au travail. Même si le navigateur était à la traîne, que l'utilisateur tapait ou que la planète était sur le point d'exploser, le train de rendu ne s'arrêtait pas. ?

Comment ça marche (à un niveau élevé)?

Avec la fibre, il existe désormais différents niveaux de priorité pour les mises à jour. La mise à jour d'une entrée dans laquelle un utilisateur entre a une priorité plus élevée qu'une liste avec des milliers de composants.

La fibre décompose le calcul de l'arbre en unités de travail qu'elle peut «valider» à tout moment. Alors, qu'est-ce qu'une unité de travail? C'est simplement un nœud dans votre arborescence de composants!

  1. React peut désormais interrompre, reprendre et redémarrer le travail sur un composant. Cela signifie que certains hooks de cycle de vie peuvent se déclencher plus d'une fois.
  2. React peut avoir un système de mise à jour basé sur les priorités. Cela permet à l'équipe React d'ajuster le moteur de rendu afin que React soit le plus rapide dans les cas d'utilisation les plus courants.

Je veux cependant me concentrer un peu sur ce premier point. React va s'éloigner (mais toujours soutenir!) De certains anciens hooks de cycle de vie et en ajouter de nouveaux! ?

componentWillMount, componentWillUpdate, componentWillReceiveProps, Peut maintenant tirer à plusieurs reprises. Vous ne devriez pas déclencher d'effets secondaires ici.

Maintenant, vous voulez déclencher des effets secondaires dans les hooks du cycle de vie qui ne se déclencheront qu'une seule fois: componentDidMountetcomponentDidUpdate

Pour compenser la plupart des cas d'utilisation componentWillReceiveProps couverts, nous recevrons deux nouveaux hooks.

  1. getDerivedStateFromProps qui n'a pas accès aux accessoires précédents ou à l'instance de composant, mais vous permet de synchroniser l'état avec vos accessoires.
  2. getSnapshotBeforeUpdatevous donne accès au DOM avant sa mise à jour. La valeur que vous renvoyez est utilisable dans componentDidUpdate.
Depuis React 16.4, getDerivedStateFromProps se déclenche désormais toujours avant la méthode de rendu. Pas seulement lors de la mise à jour des accessoires!

En résumé, Fiber permet à React d'ajuster le rendu pour s'assurer que les mises à jour les plus importantes se produisent le plus rapidement possible, le tout pour le coût léger de certains crochets de cycle de vie et de gallons de sang de développement Facebook. ?

Si vous avez des questions ou recherchez un mentorat individuel avec React, n'hésitez pas à me tweeter @yurkaninryan à tout moment!

Si vous aimez mon style d'écriture, voici quelques autres articles que j'ai rédigés.

Bonne chance et bon codage! ??