Jour 2 : Comment React met à jour l'UI

Hier, j'ai appris ce que fait React. Aujourd'hui, j'ai appris comment il le fait.

Je me demandais comment React savait exactement quoi modifier dans l'UI. Si vous changez un seul mot dans un paragraphe, est-ce que React reconstruit toute la page ? Non. Il utilise un processus intelligent pour rester rapide.

Voici le détail du cycle de mise à jour de React.

Réconciliation et Diffing

La réconciliation est la stratégie. Le diffing est la méthode réelle. React compare le nouvel arbre Virtual DOM avec l'ancien.

Comparer deux arbres est difficile pour les ordinateurs. Un algorithme standard est trop lent. React reste rapide en faisant deux suppositions :

  • Si le type d'un élément change, React détruit l'ancien arbre et en construit un nouveau.
  • Si le type reste le même, React met à jour uniquement les attributs modifiés.

Cela permet à React de s'exécuter en temps O(n). Cela rend les mises à jour instantanées.

Les deux phases

React divise son travail en deux étapes distinctes :

  1. Render Phase C'est l'étape de planification. React appelle vos composants et calcule les changements. Il ne touche pas au Real DOM ici. Voyez cela comme un architecte dessinant un plan.

  2. Commit Phase C'est l'étape de construction. React applique les changements calculés au Real DOM. Cette partie est synchrone. Une fois lancée, elle ne s'arrête pas tant que le travail n'est pas terminé.

Important : React met à jour le DOM, mais le navigateur peint les pixels. React gère la structure. Le navigateur gère le rendu visuel.

React Fiber

Avant React 16, le rendu était synchrone. Si un rendu prenait trop de temps, le navigateur se figeait. On ne pouvait ni faire défiler la page ni taper de texte.

Fiber a changé cela. Fiber est le moteur qui gère la Render Phase. Il permet à React de :

  • Mettre le travail en pause et y revenir plus tard.
  • Prioriser les mises à jour urgentes, comme la saisie de l'utilisateur, par rapport aux données en arrière-plan.
  • Diviser le travail en petits morceaux.

Le Virtual DOM est la structure de données. Fiber est l'algorithme qui opère sur ces données.

Résumé du flux :

• Le State change. • Render Phase : React planifie les changements via le Diffing. • Commit Phase : React met à jour le Real DOM. • Navigateur : Layout, Paint et Composite. • Les pixels apparaissent à l'écran.

Source: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f