React Router实战总结从入门到精通核心技术全解析

优化前：卡得不行

话说最近接手了一个用React Router做的项目，一打开就发现这玩意儿卡得不行。用户在切换路由时，页面加载速度慢得让人抓狂。有时候甚至要等个5秒才能看到新页面，用户体验简直不能更差了。

找到毛病了！

首先，我得找出问题到底出在哪里。用了Chrome DevTools的Performance面板跑了一下，发现有几个地方特别耗时：

• 组件渲染时间长
• 数据请求时间长
• 大量无用的重渲染

具体来说，一些组件在每次路由切换时都会重新渲染，导致性能瓶颈。另外，数据请求的时间也特别长，有些请求甚至需要几秒才能返回结果。

优化后：流畅多了

试了几种方案，最后这个效果最好。下面我来详细讲讲具体是怎么优化的。

1. 懒加载路由

首先是懒加载路由。以前所有的路由组件都是直接导入的，这样会导致初始加载时间很长。改成了动态导入后，效果显著提升。

优化前：

import Home from './Home';
import About from './About';
import Contact from './Contact';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
];

优化后：

const routes = [
  { path: '/', element: <Suspense fallback={
Loading...
}>, loader: () => import('./Home') },
  { path: '/about', element: <Suspense fallback={
Loading...
}>, loader: () => import('./About') },
  { path: '/contact', element: <Suspense fallback={
Loading...
}>, loader: () => import('./Contact') },
];

这样一来，只有当用户访问某个路由时，才会加载对应的组件，大大减少了初始加载时间。

2. 使用React.memo和useMemo减少不必要的重渲染

接着是减少不必要的重渲染。发现有些组件明明没有变化，但还是会被重新渲染。使用React.memo和useMemo可以有效解决这个问题。

优化前：

function ExpensiveComponent({ data }) {
  return 
{data.map(item => 
{item.name}
)}
;
}

优化后：

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  const memoizedData = useMemo(() => data.map(item => 
{item.name}
), [data]);
  return 
{memoizedData}
;
});

这样可以确保只有当data发生变化时，组件才会重新渲染。

3. 优化数据请求

数据请求方面，我发现有些API响应时间特别长。优化的方法主要有两个：一是使用缓存，二是并行请求。

优化前：

const fetchData = async () => {
  const response = await fetch('https://jztheme.com/api/data');
  const data = await response.json();
  return data;
};

优化后：

const fetchData = async (useCache) => {
  if (useCache && localStorage.getItem('cachedData')) {
    return JSON.parse(localStorage.getItem('cachedData'));
  }
  const response = await fetch('https://jztheme.com/api/data');
  const data = await response.json();
  localStorage.setItem('cachedData', JSON.stringify(data));
  return data;
};

这样可以在本地缓存数据，减少重复请求的时间。另外，如果多个请求之间没有依赖关系，可以考虑并行请求：

const [data1, data2] = await Promise.all([
  fetchData(true),
  fetchData(false),
]);

性能数据对比

经过这些优化，页面加载时间从原来的5秒左右降到了800毫秒左右。用户反馈明显好多了，抱怨少了，好评多了。

当然，还有一些小问题，比如偶尔会有缓存失效的情况，但总体来说已经很能接受了。

总结

以上就是我对React Router性能优化的一些经验分享。希望对你有帮助。如果有更好的方案，欢迎评论区交流。后续还会继续分享更多实战经验，大家多多关注。