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 ?