Comment ReactJS gère-t-il la mémoire pour une application comportant un grand nombre de composants ?

Question

Je suis en train de reconstruire une application web traditionnelle à grande échelle en ReactJS. J'utilise react-router pour charger différents composants (avec des composants enfants) en fonction de la route actuelle. L'application aura des centaines de routes, et ma préoccupation est que l'application pourrait ralentir au niveau de la mémoire plus l'utilisateur est sur l'application (beaucoup de routes visitées).

Est-ce que cela doit être un problème, ou dois-je faire quelque chose pour décharger les composants précédemment chargés pour la performance ?

Merci d'avance !

Answer 1

Est-ce que cela doit être un problème, ou dois-je faire quelque chose pour décharger les composants précédemment chargés pour la performance ?

Ce n'est pas un problème du tout. React a des cycles de vie d'état et le principe le plus important qui est Reconciliation qui stipule :

Lors de la prochaine mise à jour de l'état ou des props, la fonction render() renverra un arbre différent d'éléments React. React doit alors trouver comment mettre à jour efficacement l'interface utilisateur pour correspondre à l'arbre le plus récent.

Answer 2

En outre, en plus des autres réponses, vous pouvez améliorer les performances de votre application react en utilisant des techniques telles que fractionnement du code .

Au lieu de télécharger l'ensemble du paquet d'applications avant que les utilisateurs puissent l'utiliser, le fractionnement du code vous permet de diviser votre code en petits morceaux que vous pouvez ensuite charger à la demande. Vous pouvez introduire Fractionnement du code en fonction de l'itinéraire puisque vous avez un grand nombre de routes dans votre application.

Comme mentionné dans les docs :

La division du code de votre application peut vous aider à "charger paresseusement" uniquement les éléments dont l'utilisateur a actuellement besoin, ce qui peut améliorer considérablement les performances de votre application. Vous n'avez pas réduit la quantité totale de code dans votre application, mais vous avez évité de charger du code dont l'utilisateur n'aura peut-être jamais besoin et réduit la quantité de code nécessaire lors du chargement initial.