React Router v4路由器组件中的所有内容都会在每次路由更改时重新呈现

Question

我试图更好地理解为什么每当路由在React Router v5中发生变化时我的所有组件都会重新渲染。请注意，这些组件仅重新呈现而非重新安装。当我在开发工具中打开react扩展并选择Highlight Updates复选框时，我可以看到更改路由时所有组件都被概述，甚至是比路由匹配更高级别的组件：

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

在这个简单的例子中，我预计，改变路由不会重新呈现MyHeader组件，因为没有任何变化。但是我仍然会看到开发工具的亮点。我认为这是预期的，因为文档中的所有示例都表现出相同的行为。

我的问题是双重的。 1）使MyHeader之类的组件重新渲染的实际原因是什么？似乎没有任何道具或国家正在改变。是因为路由器使用Context API的方式？路由器正在渲染并导致孩子重新渲染？ 2）为什么这不被认为是浪费？看起来即使实际的DOM没有改变，React仍然必须经历虚拟DOM中的协调步骤。它是如此之快，它无所谓？当你开始拥有大量嵌套组件时会发生什么？

Answer 1

是的，这就是这片土地。

当重新呈现父组件时，除非它们是React.PureComponent或以其他方式定义shouldComponentUpdate()，否则您的组件将重新呈现。