react如何代码优化
代码拆分与懒加载
利用React的React.lazy和Suspense实现组件懒加载，减少初始加载时间。动态导入组件只在需要时加载，适用于路由或非关键组件。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}使用Memo优化渲染
通过React.memo缓存组件，避免不必要的重新渲染。适用于props未变化的纯函数组件。
const MemoizedComponent = React.memo(function MyComponent({ prop }) {
return <div>{prop}</div>;
});避免内联函数与对象
内联函数或对象会导致每次渲染创建新的引用，触发子组件不必要的更新。改用useCallback和useMemo缓存。
const handleClick = useCallback(() => {
// 处理逻辑
}, [dependencies]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);虚拟列表优化长列表
使用react-window或react-virtualized库渲染长列表，仅渲染可视区域内的元素，大幅减少DOM节点数量。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
function App() {
return (
<List height={600} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
);
}减少状态提升
将状态尽量下放到需要它的组件中，避免全局状态管理导致的广泛重新渲染。结合Context API或状态管理库按需更新。
生产环境构建
使用webpack或vite的生产模式构建，启用代码压缩（Terser）、Tree Shaking和代码分割。确保移除开发环境的调试代码。
# Vite生产构建
vite build --mode production性能分析工具
通过React DevTools的“Profiler”标签分析组件渲染时间，识别性能瓶颈。结合Chrome DevTools的“Performance”面板进行更深入的运行时分析。
避免滥用Context
Context的更新会触发所有消费者重新渲染。将大Context拆分为小范围Context，或使用状态管理库（如Redux）优化更新粒度。
服务端渲染（SSR）
对SEO或首屏速度要求高的应用，使用Next.js等框架实现SSR，减少客户端渲染压力。
依赖优化
定期检查package.json，移除未使用的依赖。使用bundle-analyzer分析打包体积，优化大型库（如按需引入lodash）。
# 分析打包体积
npx source-map-explorer 'build/static/js/*.js'
