如何优化组件渲染?

Question

如何优化组件渲染?

我有路由，这取决于侧边栏的内容变化，但有地方的路由是不同的，和侧边栏的内容不改变，如何确保在这种情况下，侧边栏不重新渲染?

{
path: '/users',
exact: true,
breadcrumb: DynamicBreadcrumb,
sidebar: () => <SidebarComponents.Users/>, // 1
main: () => <Modules.Users/>,
},
{
path: '/users/:id/settings',
exact: true,
breadcrumb: DynamicBreadcrumb,
sidebar: () => <SidebarComponents.Users/>, // 2
main: () => <Modules.UsersSettings/>,
},
{
path: '/users/:id',
exact: true,
breadcrumb: DynamicBreadcrumb,
sidebar: () => <SidebarComponents.SelectedUser/>,
main: () => <Modules.SelectedUser/>,
},
{routes.map((route, idx) => (
<Route key={idx} path={route.path} exact={route.exact}>
<Wrapper>
<Sidebar component={<route.sidebar />} /> // Now every time the route changes, the sidebar is re-rendered
<>
<Modules.Header />
<Breadcrumbs />
<route.main />
</>
</Wrapper>
</Route>
))}

Answer 1

如果我正在阅读你的代码并正确理解问题，我相信这种重新呈现是由使用匿名函数来呈现侧边栏组件而不是传递直接引用到React组件引起的。

的例子:

[
{
path: '/users',
exact: true,
breadcrumb: DynamicBreadcrumb,
sidebar: SidebarComponents.Users, // 1
main: () => <Modules.Users/>,
},
{
path: '/users/:id/settings',
exact: true,
breadcrumb: DynamicBreadcrumb,
sidebar: SidebarComponents.Users, // 2
main: () => <Modules.UsersSettings/>,
},
{
path: '/users/:id',
exact: true,
breadcrumb: DynamicBreadcrumb,
sidebar: SidebarComponents.SelectedUser,
main: () => <Modules.SelectedUser/>,
},
]

…

{routes.map(({ exact, path, sidebar }) => (
<Route key={path} path={path} exact={exact}>
<Wrapper>
<Sidebar component={sidebar} /> // <-- pass as reference
<>
<Modules.Header />
<Breadcrumbs />
<route.main />
</>
</Wrapper>
</Route>
))}

…

在Sidebar中，将component道具重命名为Component，并渲染为JSX。

const Sidebar = ({ ...other props ..., component: Component }) => {
...
return (
...
<Component />
...
);
}