Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Mon anglais est limité, mes compétences sont médiocres et je suis très compétent. Comme je ne suis pas traducteur, il y a beaucoup de traductions aléatoires. Si vous ne pouvez pas me croire, veuillez lire le texte original ~~.

Adresse d'origine :https://facebook.github.io/react/docs/performances-avancées.html

---

###Optimisation des performances

Chaque fois que les développeurs choisissent d'utiliser React dans un projet réel, ils se posent d'abord une question : l'utilisation de React rendra-t-elle le projet plus rapide, plus flexible et plus facile à maintenir. De plus, le processus de rendu de l'interface à chaque fois que les données d'état changent entraînera-t-il un goulot d'étranglement en termes de performances ? En interne, React garantit les performances en utilisant des techniques subtiles pour minimiser les opérations DOM coûteuses qui entraînent des mises à jour de l'interface utilisateur à chaque fois.

####Éviter l'effet direct sur le DOM
React implémente une couche de DOM virtuel, qui est utilisée pour mapper l'arborescence DOM native du navigateur. Grâce à cette couche de DOM virtuel, React peut éviter d'exploiter directement le DOM, car la vitesse d'exploitation directe du DOM du navigateur est bien inférieure à celle de l'exploitation des objets JavaScript. Chaque fois que les propriétés ou l'état d'un composant changent, React construira un nouveau dom virtuel dans la mémoire et le comparera à l'ancien d'origine pour déterminer si l'arborescence dom du navigateur doit être mise à jour, optimisant ainsi le rendu du dom autant que possible. possible.

En plus de cela, React fournit des fonctions de cycle de vie des composants.shouldComponentUpdate, le composant appellera cette fonction avant de décider de restituer (une fois la comparaison du DOM virtuel terminée et le DOM final généré). Cette fonction donne au développeur le pouvoir de restituer, et la fonction renvoie directement par défaut).true, indiquant que la mise à jour du DOM sera lancée directement par défaut :

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

Il convient de noter que React appellera cette fonction très fréquemment, donc si vous envisagez d'implémenter vous-même la logique de cette fonction, veuillez garantir les performances autant que possible.

Par exemple, vous disposez d'une application de chat avec plusieurs publications. Si une seule d'entre elles change à ce moment-là, si vous implémentez ce qui suit.shouldComponentUpdate, réagir évitera de restituer les messages qui n'ont pas changé en fonction de la situation :

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

En bref, React évite autant que possible les opérations DOM coûteuses et permet aux développeurs d'interférer avec ce comportement.

####shouldComponentUpdate en action
Voici un exemple de composant contenant des éléments enfants, comme indiqué ci-dessous :

Précédent Suivant