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

Question

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

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

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

如果您打开控制台，您将看到它。

为什么？

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

Answer 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