React路由跳转时是否会重渲染所有组件？含高阶组件封装场景示例

你当前的写法下，从"/"跳转到"/librarians"时，SideMenu和Header会发生重渲染，甚至会触发完整的卸载再重新挂载流程，原因如下：

1. 你给两个路由的component属性分别传入了AuthenticatedUser(Books)和AuthenticatedUser(Librarians)，这两次调用会生成两个完全独立的高阶组件返回值，属于不同的组件类型
2. 路由切换时，匹配到的Route会卸载旧的组件、挂载新的组件，两个独立的AuthenticatedComponent实例都会被完整替换，所以它们内部包裹的SideMenu、Header自然也会跟着卸载再重新挂载，触发重渲染。

如果想要避免公共组件的不必要重渲染，可以调整布局结构：把公共的侧边栏、头部等组件抽离到路由外层的公共布局中，高阶组件AuthenticatedUser只做权限校验，不负责布局渲染，参考调整方案（以react-router v6为例）：

// 外层公共布局组件，全局只初始化一次
function AuthenticatedLayout() {
  const classes = useStyles();
  return confirmUserAuthencition() ? (
    <>
      <SideMenu />
      <Header />
      <div className={classes.appMain}>
        <PageHeader></PageHeader>
        {/* 嵌套路由出口，路由切换时仅替换该位置内容 */}
        <Outlet />
      </div>
    </>
  ) : (
    <Redirect to="/login" />
  );
}

// 路由配置调整为嵌套结构
<Route path="/" element={<AuthenticatedLayout />}>
  <Route index element={<Books />} />
  <Route path="librarians" element={<Librarians />} />
</Route>

调整后路由切换只会替换Outlet位置的页面组件，外层的SideMenu、Header不会重新挂载，也就不会触发不必要的重渲染。

内容的提问来源于stack exchange，提问作者Ibrahim Noor