_react如何做性能优化
使用 React.memo 和 useMemo 优化渲染
React.memo 用于避免不必要的组件重渲染，适用于纯函数组件。useMemo 用于缓存计算结果，避免重复计算。例如：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 渲染逻辑 */
});
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);虚拟化长列表
对于渲染大量数据的列表，使用 react-window 或 react-virtualized 库实现虚拟滚动，只渲染可视区域内的元素。安装后基本用法：
import { FixedSizeList as List } from 'react-window';
<List
height={600}
itemCount={1000}
itemSize={35}
width={300}
>
{({ index, style }) => (
<div style={style}>Row {index}</div>
)}
</List>优化状态管理
避免将不相关的状态放在同一上下文。使用多个小型状态替代大型状态对象，减少不必要的重渲染。对于全局状态，考虑使用 Recoil 或 Zustand 这类轻量级状态管理库。
代码分割与懒加载
通过 React.lazy 和 Suspense 实现组件级代码分割，动态加载非关键组件：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}使用生产环境构建
确保部署时使用生产环境构建，React 会自动启用性能优化。Create React App 项目可通过 npm run build 生成优化后的代码。自定义 webpack 配置需设置 mode: 'production' 并启用 TerserPlugin 进行代码压缩。
分析性能问题
使用 React DevTools 的 Profiler 组件分析渲染性能。Chrome 的 Performance 工具可记录运行时性能。对于内存泄漏检测，可使用 Chrome Memory 工具进行堆快照比较。
避免内联函数和对象
在渲染方法中避免创建新的函数或对象，这会导致子组件不必要的重渲染。使用 useCallback 缓存函数：
const handleClick = useCallback(() => {
// 处理逻辑
}, [dependencies]);优化图片和静态资源
对图片使用现代格式如 WebP，实施懒加载。使用 CDN 分发静态资源，配置长期缓存。通过 webpack 的 splitChunks 优化第三方库打包。
