Question

我试图限制每次用户单击某些内容时在我的应用程序上重新呈现的组件的数量。考虑到无论用户在哪个页面上，补充工具栏都可以呈现，因此将其包装在React.memo函数中似乎很有意义。这很好用，并且补充工具栏组件本身似乎没有重新呈现。但是，我从<Link>导入的react-router-dom元素会像SidebarAuthButtons和SidebarCreateButton一样重新渲染。

我该怎么做才能防止这种行为？

import React, { memo } from "react";
import { Link } from "react-router-dom";
import {
  SidebarContainer,
  SidebarLogo,
  SidebarNav,
  SidebarMenu,
  SidebarListItem,
  SidebarButton,
} from "../styles/SidebarStyles";

function Sidebar({ auth }) {
  const SidebarAuthButtons = (
    <div>
      <SidebarButton>
        <Link to="/login">Log In</Link>
      </SidebarButton>
      <SidebarButton outlined={true}>
        <Link to="/register">Create Account</Link>
      </SidebarButton>
    </div>
  );

  const SidebarCreateButton = (
    <SidebarButton>
      <Link to="#">Create</Link>
    </SidebarButton>
  );

  return (
    <SidebarContainer>
      <SidebarLogo>React Project</SidebarLogo>
      <SidebarNav>
        <SidebarMenu>
          <SidebarListItem isHeading={true}>Menu</SidebarListItem>
          <SidebarListItem>
            <Link to="/">Explore</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/blogs">Blogs</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/podcasts">Podcasts</Link>
          </SidebarListItem>
          <SidebarListItem>
            <Link to="/youtube">Youtube</Link>
          </SidebarListItem>
        </SidebarMenu>
        {auth.isAuthenticated ? SidebarCreateButton : SidebarAuthButtons}
      </SidebarNav>
    </SidebarContainer>
  );
}

export default memo(Sidebar);

Answer 1

将SidebarAuthButtons和SidebarCreateButton移动到功能组件之外，将作用域渲染成React组件（当前它们只是jsx保存到变量中）。这样就可以解决重投问题。

如何防止重新渲染react-router-dom Link组件？

1 个答案: