Que se passe-t-il après les appels de réaction

Que se passe-t-il après les appels de réaction à setstate : 1. Fusionnez l'objet paramètre entrant avec l'état actuel du composant pour déclencher le processus de réconciliation ; 2. Construisez l'arborescence des éléments React en fonction du nouvel état et restituez l'intégralité de l'interface utilisateur ; 3. Obtenez l'arborescence des éléments Ensuite, React calculera la différence de nœuds entre le nouvel arbre et l'ancien arbre, puis minimisera et restituera.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Que s'est-il passé après que React a appelé setstate ?

React a conçu la méthode setState pour restituer la page

Deux façons d'écrire setState() pour mettre à jour l'état

setState(updater, [callback]), le programme de mise à jour renvoie l'objet stateChange Fonction : (state, props) => stateChange L'état et les accessoires reçus sont garantis être les derniers

setState(stateChange, [callback]), stateChange est un objet, le rappel est une fonction de rappel facultative, lorsque l'état est mis à jour et l'interface est mise à jour Puis exécutez

Résumé : La méthode objet est l'abréviation de la méthode fonction. Si le nouvel état ne dépend pas de l'état d'origine ===> l'état d'origine ===> Utilisez la méthode fonction si nécessaire dans setState () pour obtenir les dernières données d'état, que se passe-t-il après avoir lu

et appelé setState dans la deuxième fonction de rappel ?

Après avoir appelé la fonction setState dans le code, React fusionnera l'objet paramètre transmis avec l'état actuel du composant, puis déclenchera le processus dit de réconciliation (Réconciliation).

Après le processus de réconciliation, React construira l'arborescence des éléments React en fonction du nouvel état d'une manière relativement efficace et procédera au rendu de l'intégralité de l'interface utilisateur.

Une fois que React a obtenu l'arborescence des éléments, React calculera automatiquement la différence de nœuds entre le nouvel arbre et l'ancien, puis minimisera et restituera l'interface en fonction de la différence.

Dans l'algorithme de calcul des différences, React peut savoir de manière relativement précise quelles positions ont changé et comment elles doivent être modifiées, ce qui garantit des mises à jour à la demande au lieu d'un nouveau rendu complet.

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!