React: Fonction de performance de réconciliation vs composants de classe

Créé le 11 juil. 2019 · 3Commentaires · Source: facebook/react

Vous souhaitez demander une fonctionnalité ou signaler un bug ?
ni/bug

Quel est le comportement actuel ?
Lors de la migration des composants de classe vers des composants de fonction (avec des crochets), j'ai remarqué une baisse significative des performances . J'ai un composant (appelé TreeNodeComponent ) qui fait partie d'une arborescence. Selon la taille de l'arbre, des centaines d'instances peuvent être visibles.

L'encapsulation du composant de fonction dans un PureComponent a considérablement réduit le "temps de rendu" observé. (De ~160ms à ~60ms)

"Temps de rendu", observé dans Chrome Dev Tools

Bildschirmfoto 2019-07-11 um 16 24 10

Le contexte:

L'application rend des centaines de ces TreeNodeComponent dans un tree-structure . Lorsqu'un parent est mis à jour, tous les enfants directs doivent être réconciliés.
Projet : https://github.com/thomasnordquist/MQTT-Explorer

Quel est le comportement attendu ?
Performances comparables entre les composants fonctionnels et de classe.

Quelles versions de React, et quel navigateur/OS sont concernés par ce problème ?

OS X
Chrome 73 / Électron 5.0.5
Réagir 16.8
Script dactylographié et Webpack

Source

thomasnordquist

Commentaire le plus utile

L'encapsulation du composant de fonction dans un PureComponent a considérablement réduit le "temps de rendu" observé. (De ~160ms à ~60ms)

C'est attendu si le rendu TreeNodeComponent est cher. React.PureComponent sort tôt si les accessoires n'ont pas changé.

Lors de la migration des composants de classe vers des composants de fonction (avec des crochets), j'ai remarqué une baisse significative des performances.

Êtes-vous en train de dire que passer d'une classe étendant React.Component à un composant de fonction a provoqué une régression des performances ? Ou utilisiez-vous déjà React.PureComponent (ou shouldComponentUpdate )

Vous pouvez utiliser React.memo pour obtenir la même sémantique de sauvetage avec les composants de fonction.

aweary le 11 juil. 2019

👍2

Tous les 3 commentaires

L'encapsulation du composant de fonction dans un PureComponent a considérablement réduit le "temps de rendu" observé. (De ~160ms à ~60ms)

C'est attendu si le rendu TreeNodeComponent est cher. React.PureComponent sort tôt si les accessoires n'ont pas changé.

Lors de la migration des composants de classe vers des composants de fonction (avec des crochets), j'ai remarqué une baisse significative des performances.

Vous pouvez utiliser React.memo pour obtenir la même sémantique de sauvetage avec les composants de fonction.

aweary le 11 juil. 2019

👍2

J'ai migré d'un React.Component avec shouldComponentUpdate .

J'utilise React.useMemo pour éviter le "rendu".
React.memo donne des résultats aussi bons que ceux de PureComponent . (~50-60ms)

Merci beaucoup d'avoir clarifié.

thomasnordquist le 11 juil. 2019

👍1

Je n'ai pas compris ce qui fonctionne le mieux : des composants fonctionnels ou des composants de classe. Que dois-je utiliser pour les longues listes