做出反应。使用 react-router 重新渲染的基本示例。 +100 代表答案

【问题标题】：React. Basic example of re-rendering using react-router. +100 rep做出反应。使用 react-router 重新渲染的基本示例。 +100 代表
【发布时间】：2018-12-13 07:43:28
【问题描述】：

我是新手。我是React 的新手。我正在尝试react-router。我看到了这个例子：https://reacttraining.com/react-router/web/example/basic。

我在 Codesandbox.io 上复制了它：https://codesandbox.io/s/7jxq0j6qp0

我不明白为什么当我使用菜单的链接更改 URL 时，菜单会重新呈现自身。

如果你打开控制台你可以看到它。

为什么？

我认为它不应该重新渲染自己。只是路线部分。 我哪里错了？

【问题讨论】：

这是正常行为。您的<Menu/> 在Router 标签内，因此每次更改到任何路由时都会重新渲染。
@MatheusReis 因为我使用<Link 组件，所以它不能被超越。你有什么建议？
为什么不想重新渲染菜单？
因为是负面的性能影响。这只是一个基本示例。但我也想明白。这是一个无用的重新渲染！

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

您可以将组件编写为 PureComponent。由于现在没有任何道具更改，因此不会重新渲染：

class Menu extends React.PureComponent {
  render() {
    console.log("Menu render() - ", Date.now());
    return (
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />
      </div>
    );
 }
}

但是，对于其他用例，请注意此方法的不利方面：Dealing with Update Blocking

【讨论】：

是的，但我不明白为什么。 PureComponent 很重，因为有时重新渲染检查是否重新渲染更好。
我只是想知道如果没有任何变化，为什么它必须重新渲染。
它正在重新渲染，因为位置发生了变化。我知道这并不能回答您的问题：why it has to.. 我认为最好在 Github 存储库的 React Router 问题部分提出这个问题。
但这与您在答案中发布的链接有关吗？处理更新阻塞的问题？
它没有解释“为什么这些组件会重新渲染”，它只是帮助我们或第三方库做一些事情导致阻止此重新渲染并且我们遇到路由问题。