react如何代码优化
减少不必要的重新渲染
使用 React.memo 包装函数组件以避免在 props 未变化时重新渲染。对于类组件，可以通过 shouldComponentUpdate 或继承 PureComponent 实现类似效果。
const MemoizedComponent = React.memo(function MyComponent(props) {
// 组件逻辑
});合理使用 useMemo 和 useCallback
useMemo 缓存计算结果，避免重复计算；useCallback 缓存函数引用，防止子组件因函数引用变化而重新渲染。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);优化状态管理
避免将不相关的状态放在同一 useState 中，拆分状态可减少不必要的更新。复杂状态逻辑优先考虑 useReducer。
const [state, dispatch] = useReducer(reducer, initialState);虚拟化长列表
使用库如 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}>Item {index}</div>}
</List>按需加载组件
通过 React.lazy 和 Suspense 实现组件动态加载，减少初始包体积。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>避免内联函数和对象
内联函数或对象会导致每次渲染时生成新的引用，可能触发子组件不必要的更新。将它们移至组件外部或使用 useMemo/useCallback 优化。
使用生产环境构建
生产环境下启用代码压缩和 Tree Shaking（通过 Webpack 等工具），移除未使用的代码和调试信息。
npm run build性能分析工具
利用 React DevTools 的 Profiler 功能分析组件渲染时间，定位性能瓶颈。Chrome 的 Performance 工具也可辅助检测运行时问题。
代码分割
通过动态 import() 语法或工具（如 Webpack 的 splitChunks）拆分代码，减少初始加载时间。
import('./module').then(module => { /* 使用模块 */ });
