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]);避免内联函数和对象
内联函数或对象会导致每次渲染时生成新的引用，触发子组件不必要的更新。尽量将函数或对象提升到组件外部或使用 useMemo/useCallback。
虚拟化长列表
使用 react-window 或 react-virtualized 库实现列表虚拟化，仅渲染可视区域内的元素，大幅减少 DOM 节点数量。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => <div style={style}>Row {index}</div>;
const VirtualizedList = () => (
<List height={150} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
);代码分割与懒加载
通过 React.lazy 和 Suspense 实现组件级代码分割，减少初始加载体积。动态导入的组件会在需要时加载。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}使用生产环境构建
确保部署时使用生产环境构建，React 会移除开发模式下的警告和检查代码。通过 Webpack 的 mode: 'production' 或设置 NODE_ENV=production 实现。
优化 Context 使用
避免将频繁变化的数值通过 Context 传递，否则所有消费者组件都会重新渲染。可以拆分多个 Context 或使用状态管理库选择性订阅。
避免在渲染中执行高开销操作
如数据转换、复杂计算等操作应放在 useEffect 或 useMemo 中，避免阻塞渲染流程。确保渲染函数保持纯净且快速执行。
使用性能分析工具
通过 React DevTools 的 Profiler 组件检测性能瓶颈，识别不必要的渲染。结合 Chrome DevTools 的 Performance 面板分析具体耗时操作。
