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

Question

我试图更好地理解为什么每当路由在React Router v5中更改时，我的所有组件都会重新渲染。请注意，这些组件只是重新渲染而不是重新安装。当我在开发工具中打开react扩展并选择Highlight Updates复选框时，我可以看到更改路由时所有组件都被勾勒出轮廓，即使是比路由匹配级别更高的组件也是如此：

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

在这个简单的示例中，我希望更改路线不会重新呈现 MyHeader组件，因为没有任何更改。但是，我仍然会看到dev工具的亮点。我认为这是预料之中的，因为文档中的所有示例都表现出相同的行为。

我的问题有两个方面。1）使组件喜欢MyHeader重新渲染的真正原因是什么？似乎没有任何道具或状态正在改变。是因为路由器使用上下文API的方式？路由器正在渲染并导致子级重新渲染？2）为什么不认为这是浪费？即使实际的DOM并没有发生变化，React仍然必须经历虚拟DOM中的协调步骤。它是如此之快，没关系吗？当您开始拥有大量嵌套组件时会发生什么？

Answer 1

是的，这是一块土地。

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