L'importance de diviser les composants de réaction

Préface :

React est une bibliothèque JAVASCRIPT permettant de créer des interfaces utilisateur. Principalement utilisé pour créer une interface utilisateur, beaucoup de gens considèrent React comme le V (vue) dans MVC.

react utilise la technologie DOM virtuel pour réduire l'interaction entre Javascript et le DOM réel, améliorant ainsi les performances frontales ; en utilisant un mécanisme de flux de données unidirectionnel, le composant parent transmet les données au composant enfant via des accessoires, donc que la direction du flux de données est claire en un coup d'œil.

Une fois les accessoires ou l'état du composant modifiés, le composant et ses sous-composants seront restitués et modifiés en vdom pour terminer l'interaction du flux de données. Cependant, ce mécanisme peut rencontrer des problèmes de performances dans certains cas, par exemple lorsque la quantité de données est importante. Analysons les goulots d'étranglement des performances de React et utilisons l'outil React-Addons-Perf pour illustrer l'importance du fractionnement des composants de réaction.

Goulot d'étranglement des performances de React

Pour comprendre le goulot d'étranglement des performances de React, vous devez connaître le processus de rendu de React. Son rendu peut être divisé en deux étapes :

Composantisation initiale
Cette étape exécutera la méthode de rendu du composant et de tous ses sous-composants, générant ainsi la première version du dom virtuel.

Rendu des mises à jour des composants.
Toute modification des accessoires ou de l'état du composant déclenchera la mise à jour du rendu du composant. Par défaut, il exécutera également la méthode render du composant et tous ses sous-composants pour obtenir le nouveau DOM virtuel.

Le goulot d'étranglement des performances dont nous parlons fait référence à la situation lors de la phase de mise à jour des composants.

Processus de mise à jour du composant React

Grâce à l'analyse ci-dessus, nous pouvons savoir que le processus spécifique de mise à jour du composant est le suivant :

Exécuter la méthode de rendu du composant et tout ses sous-composants pour obtenir le DOM virtuel mis à jour, c'est-à-dire effectuer un nouveau rendu, même si le composant enfant n'a pas besoin d'être mis à jour.

Ensuite, comparez l'ancien et le nouveau DOM virtuel pour mettre à jour le composant

Dans ce processus, vous pouvez décider si un nouveau rendu est nécessaire via la valeur de retour de la méthode ShouldComponentUpdate du composant.

L'ensemble du processus de rendu de mise à jour de React peut être expliqué avec une image :

Par défaut, le ShouldComponentUpdate du composant renvoie true, c'est-à-dire que React appellera La méthode de rendu de tous les composants génère un nouveau DOM virtuel, puis le compare avec l'ancien DOM virtuel pour déterminer si le composant doit finalement être mis à jour.

Gout d'étranglement des performances de React

Permettez-moi de parler à travers des images. Par exemple, l'image ci-dessous est une arborescence de structure de composant Lorsque nous voulons mettre à jour un sous-composant, le composant vert dans l'image ci-dessous. (passé du composant racine à l'application Les données sur le composant vert changent) :

Idéalement, nous souhaitons que seuls les composants sur le chemin critique soient mis à jour, comme indiqué ci-dessous :

Cependant, l'effet réel est que chaque composant termine le processus de re-rendu et de comparaison du DOM virtuel, bien que le composant n'ait pas changé, ce qui est évidemment un gaspillage . Comme le montre la figure ci-dessous, la partie jaune représente un nouveau rendu inutile et une différence de DOM virtuel.

Selon l'analyse ci-dessus, le goulot d'étranglement des performances de React se manifeste principalement dans :

Pour les composants dont les accessoires et l'état n'ont pas changé, React a également besoin pour régénérer le DOM virtuel et le DOM virtuel diff.

Utilisez ShouldComponentUpdate pour l'optimisation des performances

En visant le goulot d'étranglement des performances de React, nous pouvons effectuer une certaine optimisation via la méthode ShouldComponentUpdate fournie par React. Nous pouvons mettre à jour de manière sélective les composants pour améliorer les performances. comme suit :

shouldComponentUpdate doit déterminer si les propriétés et l'état actuels sont les mêmes que la dernière fois. S'ils sont identiques, il n'est pas nécessaire d'effectuer le processus ultérieur de génération du DOM virtuel et de sa différence, sinon il faut le mettre à jour.

(Partage vidéo d'apprentissage : tutoriel vidéo javascript)

L'implémentation spécifique peut être affichée comme suit :

shouldComponentUpdate(nextProps, nextState){   return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state)
}

Parmi eux, la méthode isEqual est pour déterminer si deux objets sont égaux (fait référence au fait que le contenu de ses objets est égal et non congruent).

En affichant et en remplaçant la méthode ShouldComponentUpdate, vous pouvez déterminer si le composant doit être mis à jour pour éviter les mises à jour inutiles. Cependant, l'ajout de cette méthode à chaque composant sera fastidieux, React fournit une solution officielle. :

La solution encapsule le ShouldComponentUpdate du composant et implémente une comparaison superficielle des propriétés et de l'état actuels du composant avec le précédent, déterminant ainsi si le composant doit être mis à jour.

React fournit deux ensembles de solutions officielles à différents stades de développement :

PureRenderMin
One est un composant créé sur la base de React.createClass d'ES5, combiné avec la méthode mixins sous cette forme ShouldComponentUpdate méthode fournie par PureRenderMixin. Bien entendu, les composants créés avec ES6 peuvent également utiliser cette solution.

PureComponent
Cette solution est une classe de base de composants ajoutée pour ES6 publié dans React 15.3.0 : React.PureComponent. Ceci est évidemment plus convivial pour les composants créés à la manière ES6.

Il convient de souligner que qu'il s'agisse de PureRenderMin ou de PureComponent, leur méthode interne ShouldComponentUpdate compare superficiellement (shallowCompare) les accessoires et les objets d'état, c'est-à-dire ne compare que le premier objet. de l'objet. Si les attributs et leurs valeurs d'une couche sont les mêmes. Par exemple, l'objet d'état suivant est remplacé par la valeur suivante :

Étant donné que la valeur de state est affectée à un autre objet, nextState.value et this.props.value sont toujours pas égal, ce qui entraîne une comparaison superficielle. La comparaison a échoué. Dans les projets réels, ce type de résultat d'objet imbriqué est très courant si la méthode PureRenderMin ou PureComponent est utilisée, l'effet souhaité ne sera pas obtenu.

Bien qu'elle puisse être jugée par comparaison approfondie, la comparaison approfondie est similaire à la copie approfondie, une opération récursive, et la surcharge de performances est relativement importante.

À cette fin, vous pouvez diviser les composants autant que possible pour aplatir les accessoires et les données d'objet d'état des composants. En combinaison avec l'utilisation de PureRenderMin ou PureComponent pour déterminer si le composant a été mis à jour, vous pouvez mieux l'améliorer. les performances de React , n'exigent pas que les développeurs s'en soucient trop.

Découpage des composants

Le fractionnement des composants, en réaction, consiste à subdiviser les composants autant que possible pour faciliter la réutilisation et l'optimisation. Les principes spécifiques du fractionnement :

Essayez de faciliter la détermination de l'opportunité de mettre à jour le composant fractionné

Ce n'est pas facile à comprendre. Donnons un exemple : supposons que nous définissions un composant parent qui. contient 5 000 sous-composants. Il y a une opération de saisie dans la zone de saisie. Chaque fois qu'un nombre est saisi, la couleur d'arrière-plan du sous-composant correspondant devient rouge.

Dans cet exemple, le composant zone de saisie et le sous-composant liste sont évidemment différents. L'un est dynamique et les valeurs d'entrée sont plus fréquentes ; statique, quelle que soit l'entrée, il s'agit de 5 000 éléments. Chaque fois qu'un nombre est saisi dans la zone de saisie, tous les composants seront restitués, ce qui entraînera des mises à jour inutiles des sous-composants de la liste.

On voit que la mise à jour du composant liste ci-dessus n'est pas facile à annuler, car l'état du composant d'entrée et du sous-composant liste sont placés dans l'état du composant parent, et ils sont partagés ; il est impossible pour React d'utiliser la valeur de retour de ShouldComponentUpdate pour mettre à jour une partie du composant et l'autre non. Ce n'est qu'en les divisant en différents composants que chaque composant ne se soucie que des accessoires correspondants. Le composant de liste fractionnée ne se soucie que de ses propres attributs, et d'autres composants provoquent la mise à jour du composant parent. Dans le composant de liste, vous pouvez décider de mettre à jour en jugeant la valeur des attributs qui vous intéressent, afin de mieux optimiser. le composant.

Essayez d'aplatir les accessoires et les données d'état des composants divisés

Ceci est principalement considéré du point de vue de l'optimisation des composants. Si le composant n'a pas besoin de prêter trop d'attention aux performances, il peut le faire. être ignoré.

La raison pour laquelle les composants divisés sont plats est que la solution d'optimisation PureRenderMin ou PureComponent fournie par React compare superficiellement les accessoires et l'état du composant pour décider s'il faut mettre à jour le composant.

Dans le composant de liste ci-dessus, this.state.items stocke un tableau d'objets Afin de mieux juger si chaque liste doit être mise à jour, chaque élément de liste li peut être divisé en un composant d'élément de liste. les accessoires liés à chaque élément de la liste sont chaque objet du tableau items. Ces données plates permettent de déterminer facilement si les données ont changé.

Un exemple de fractionnement de composants

Pour cet article, j'ai écrit une bibliothèque de cas sur l'ajout et l'affichage d'une liste Todo. Clonez le code localement pour exécuter l'effet localement.

La bibliothèque de cas est une liste Todo avec 5 000 éléments, et les éléments Todo peuvent être supprimés et ajoutés. Cet exemple montre la comparaison de l'expérience avant et après le fractionnement des composants, et on peut voir qu'il y a une amélioration significative des performances.

Ci-dessous, nous combinons l'outil de test de performances de React, React-Addons-perf, pour illustrer la situation de fractionnement des composants.

La partie rendu du composant TodosBeforeDivision avant le fractionnement est la suivante :

Avant que le composant ne soit divisé, vous pouvez saisir des caractères dans la zone de saisie, ajouter tâches, ou supprimer des éléments à faire. Il y a un décalage évident, comme le montre la figure ci-dessous :

Afin de déterminer la cause du décalage, nous utilisons le devTool de Chrome pour localiser. La méthode consiste à utiliser l'option Performances de la dernière version du navigateur Chrome pour terminer. Cliquez d'abord sur le bouton d'enregistrement dans cette option pour démarrer l'enregistrement. À ce moment, nous entrons un caractère dans la zone de saisie du composant, puis cliquez sur arrêter pour arrêter l'enregistrement. Nous verrons un profil de performance du composant du début à la fin. l'entrée.

Comme vous pouvez le voir sur l'image, lorsque nous saisissons un seul caractère, la logique des événements d'entrée de la zone de saisie prend presque tout le temps de réponse. est principalement la méthode batchedUpdates au niveau de réaction. Mettre à jour les composants de la liste par lots au lieu de la logique définie par l'utilisateur.

Alors, pourquoi la mise à jour par lots prend-elle autant de temps ? Afin d'en comprendre la raison, nous utilisons le plug-in chrome chrome-react-perf basé sur react-addons-perf, qui génère les résultats de l'analyse dans sous la forme d'un plug-in Chrome.

Une chose à noter lors de l'utilisation de ce plug-in est :

L'utilisation du plug-in chrome-react-perf nécessite l'introduction du module react-addons-perf dans le projet , et son objet doit être monté sur la fenêtre Sur l'attribut Perf de l'objet global, sinon il ne peut pas être utilisé.

Sélectionnez la vue des options Perf dans l'outil devTool, cliquez sur le bouton Démarrer et il deviendra un bouton d'arrêt, entrez un caractère dans la zone de saisie du composant, puis cliquez sur le bouton d'arrêt dans la vue Perf, vous obtenez la tentative de performance correspondante.

Parmi les 4 vues fournies dans la figure ci-dessus, Print Wasted est la plus utile pour analyser les performances. Elle indique que le composant n'a pas changé mais a participé au processus de mise à jour, c'est-à-dire du gaspillage de re- Le processus de rendu et de vdom-diff est un processus dénué de sens. Comme le montre la figure : les composants TodosBeforeDivision et TodoItem ont perdu respectivement 167,88 ms et 144,47 ms. Cette surcharge peut être évitée en divisant les composants. C'est l'objectif de l'optimisation des performances de réaction.

Pour cela, nous devons diviser le composant TodosBeforeDivision en un composant dynamique AddTodoForm avec entrée et bouton et un composant relativement statique TodoList. Les deux héritent respectivement de React.PureComponent pour éviter les mises à jour inutiles des composants.

Le composant TodoList doit également être divisé en un composant TodoItem pour chaque tâche Todo, de sorte que l'objet props de chaque composant TodoItem soit des données plates et que React puisse être entièrement utilisé .PureComponent est utilisé pour effectuer une comparaison superficielle des objets afin de mieux déterminer si le composant doit être mis à jour. Cela évite d'avoir à mettre à jour d'autres composants TodoItem lorsqu'un élément TodoItem est ajouté ou supprimé.

Après avoir divisé les composants de cette manière, utilisez l'outil de test de performances ci-dessus pour vérifier l'effet correspondant :

Comme le montre la capture d'écran ci-dessus, les performances du composant divisé ont été améliorées des centaines de fois, bien qu'elles incluent également d'autres optimisations, telles que le fait de ne pas lier la fonction à celui-ci dans la position de l'attribut du composant et la mise en cache des accessoires d'objet constants pour évitez de re-régénérer de nouvelles fonctions et de nouveaux accessoires d'objet lors du rendu.

En général, la division des composants de réaction est très importante pour améliorer les performances de réaction. C'est également une direction pour l'optimisation des performances de réaction.

Recommandations associées : Tutoriel 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!