v6路由切换性能瓶颈：组件重渲染次数过多排查

在React Router v6升级过程中，我们遇到了路由切换时组件重渲染次数过多的性能瓶颈问题。本文将详细分析该问题并提供解决方案。

问题现象

在v6版本中，当用户从一个路由切换到另一个路由时，发现组件被重复渲染了多次。例如，从/home切换到/about，About组件竟然渲染了3次，这严重影响了应用性能。

复现步骤

1. 创建基础路由结构：

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> }
]);

2. 在组件中添加console.log：

function About() {
  console.log('About component rendered');
  return <div>About</div>;
}

3. 切换路由观察控制台输出

根本原因

v6版本中，React Router引入了新的路由结构，当嵌套路由或使用useNavigate时，会触发不必要的重渲染。主要问题包括：

• 路由组件的重新挂载
• useLocation和useParams的频繁更新
• <Routes>组件的内部实现变化

解决方案

1. 使用React.memo优化组件：

const About = React.memo(() => {
  console.log('About component rendered');
  return <div>About</div>;
});

2. 合理使用useCallback和useMemo：
3. 避免在路由组件中直接使用useNavigate的回调函数
4. 考虑使用<Suspense>处理异步加载

通过以上优化，可以显著减少不必要的重渲染次数，提升应用性能。