反应.使用 react-router 重新渲染的基本示例.+100 代表 [英] React. Basic example of re-rendering using react-router. +100 rep

问题描述

我是新手.我是 React 的新手.我正在尝试 react-router.我看到了这个例子:

打开控制台就可以看到.

为什么?

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

解决方案

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

class Menu 扩展 React.PureComponent {使成为() {console.log("Menu render() - ", Date.now());返回 (<div><ul><li><链接到="/">主页</链接><li><Link to="/about">关于</Link><li><Link to="/topics">主题</Link><小时/>

);}}

但是，请注意此方法在其他用例中的负面作用:处理更新阻塞

I'm newbie. And I'm newbie at React. I'm trying react-router. I saw this example: https://reacttraining.com/react-router/web/example/basic.

I reproduced it on Codesandbox.io here: https://codesandbox.io/s/7jxq0j6qp0

I don't understand why the Menu is re-rendering itself when I change URL using menu's links.

If you open console you can see it.

Why?

I think it should not re-render itself. Just the route section. Where am I wrong?

解决方案

You can write your component as PureComponent. Since there is no prop changes right now it won't be re-rendered:

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>
    );
 }
}

But, please be aware of the negative sides of this method for other use cases: Dealing with Update Blocking

这篇关于反应.使用 react-router 重新渲染的基本示例.+100 代表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！