5 votes

React Router v4 tout dans le composant Router est re-rendu à chaque changement de route

J'essaie de mieux comprendre pourquoi tous mes composants s'affichent de nouveau chaque fois qu'une route change dans React Router v5. re-rendu no remontage . Lorsque j'ouvre l'extension react dans les outils de développement et que je sélectionne l'option Highlight Updates je peux voir que tous mes composants sont mis en évidence lors d'un changement d'itinéraire, même les composants qui se trouvent à un niveau supérieur à celui de l'itinéraire :

<Router>
  <MyHeader />
  <ComponentWithRoutes />
</Router>

Dans cet exemple simple, je m'attendrais à ce que la modification des itinéraires n'entraîne pas un nouveau rendu de la page d'accueil. MyHeader puisque rien ne change. Cependant, je verrai toujours une surbrillance avec les outils de développement. Je suppose que c'est normal, puisque tous les exemples de la documentation présentent le même comportement.

Ma question est double. 1) Quelle est la cause réelle de la fabrication d'un composant comme le MyHeader pour un nouveau rendu ? Il ne semble pas qu'il y ait de changement de props ou d'état. Est-ce dû à la façon dont le routeur utilise l'API contextuelle ? Le routeur effectue un rendu et provoque un nouveau rendu des enfants ? 2) Pourquoi cela n'est-il pas considéré comme du gaspillage ? Il semble que même si le DOM réel ne change pas, React devrait quand même passer par les étapes de réconciliation dans le DOM virtuel. Est-ce que c'est tellement rapide que ça n'a pas d'importance ? Que se passe-t-il lorsque vous commencez à avoir des tonnes de composants imbriqués ?

6voto

AKX Points 14236

Oui, c'est ainsi que les choses se passent.

Vos composants seront rendus à nouveau à moins qu'ils ne soient React.PureComponent ou définir autrement shouldComponentUpdate() lorsque le composant parent est recalculé.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X