react如何实现性能优化
React 性能优化方法
使用 React.memo 避免不必要的重新渲染
对于函数组件，可以使用 React.memo 进行浅比较，避免在 props 未变化时重新渲染。适用于纯展示型组件或 props 变化频率低的场景。
const MemoizedComponent = React.memo(function MyComponent(props) {
// 组件逻辑
});合理使用 useMemo 和 useCallbackuseMemo 缓存计算结果，避免重复计算；useCallback 缓存函数引用，避免子组件因函数引用变化而重新渲染。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);避免内联对象和函数作为 props
内联对象或函数会导致每次渲染时生成新的引用，触发子组件不必要的更新。应将其移至组件外部或使用 useMemo/useCallback 优化。
使用 React.PureComponent 或 shouldComponentUpdate
类组件可通过继承 PureComponent（自动浅比较 props/state）或手动实现 shouldComponentUpdate 来跳过渲染。
class OptimizedComponent extends React.PureComponent {
// 自动浅比较 props 和 state
}代码分割与懒加载
利用 React.lazy 和 Suspense 实现组件级代码分割，减少初始加载时间。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}虚拟列表优化长列表
使用库如 react-window 或 react-virtualized 仅渲染可视区域内的列表项，大幅减少 DOM 节点数量。
import { FixedSizeList as List } from 'react-window';
function MyList({ data }) {
return (
<List height={600} itemCount={data.length} itemSize={35} width={300}>
{({ index, style }) => <div style={style}>{data[index]}</div>}
</List>
);
}减少 Context 的触发范围
将 Context 拆分为多个独立的小 Context，避免单一 Context 变化导致所有消费者重新渲染。可通过组合多个 Provider 实现。
使用生产环境构建
生产构建会移除开发模式的警告和冗余代码，启用压缩和代码优化。确保构建命令包含 NODE_ENV=production。
分析性能瓶颈
使用 React DevTools 的 Profiler 或浏览器 Performance 工具定位渲染耗时组件。结合 why-did-you-render 库检测不必要的更新。
关键实践注意事项
- 避免在渲染函数中进行复杂计算或数据转换。
- 谨慎使用
useEffect的依赖数组，避免频繁执行副作用。 - 对于大型状态管理，考虑使用 Redux 或 Zustand 等库的优化模式。
