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

【问题标题】：React Router v4 everything in the Router component re-renders on every route changeReact Router v4 路由器组件中的所有内容都会在每次路由更改时重新渲染
【发布时间】：2018-06-05 15:54:05
【问题描述】：

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

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

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

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

【问题讨论】：

> 被认为是浪费你怎么知道该组件需要重新渲染？ :)
在我阅读了您最初的标题后，我实际上去检查他们是否发布了我不知道的 v5 :)
@fabio.sussetto 抱歉，试图尽早赶上那个编辑。 ;)

标签： javascript reactjs react-router-v4

【解决方案1】：

是的，这就是国情。

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

【讨论】：

好的，有道理。基本上，如果我有任何不包含任何正在监听路由的嵌套组件的组件，我可以实现 PureComponent。但是任何在某处有路由的 DOM 分支都需要重新渲染。有没有我应该注意的瓶颈？
过早的优化是万恶之源。在你测量出你需要做之前不要担心。