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

Question

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

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

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

我的问题有两个方面。 1) 使像 MyHeader 这样的组件重新渲染的实际原因是什么？似乎没有任何 Prop 或状态正在改变。是因为 Router 使用 Context API 的方式吗？路由器正在渲染并导致 child 重新渲染？ 2)为什么这不被认为是浪费？看起来即使实际的 DOM 没有改变，React 仍然必须通过虚拟 DOM 中的协调步骤。就这么快没关系吗？当您开始拥有大量嵌套组件时会发生什么？

Answer 1

是的，这就是这片土地。

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