react如何对性能进行优化
减少不必要的重新渲染
使用 React.memo 对函数组件进行记忆化，避免在 props 未变化时重新渲染。对于类组件，可以通过继承 PureComponent 或手动实现 shouldComponentUpdate 来优化渲染逻辑。
const MemoizedComponent = React.memo(function MyComponent(props) {
// 组件逻辑
});使用 useCallback 和 useMemo
useCallback 用于缓存函数，避免在依赖项未变化时重新创建函数。useMemo 用于缓存计算结果，避免重复计算。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);虚拟化长列表
对于渲染大量数据的列表，使用虚拟滚动技术，如 react-window 或 react-virtualized，只渲染可视区域内的元素。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const Example = () => (
<List height={150} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
);代码分割与懒加载
利用 React.lazy 和 Suspense 实现组件的懒加载，减少初始加载时间。结合 Webpack 的动态导入功能，实现代码分割。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}优化状态管理
避免将不必要的状态提升到全局，合理使用 Context 或状态管理库（如 Redux、MobX）。确保 Context 的 value 不会频繁变化，否则会导致所有消费者重新渲染。
const MyContext = React.createContext();
function App() {
const value = useMemo(() => ({ key: 'value' }), []);
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}使用生产环境构建
确保生产环境使用优化后的 React 构建版本。通过 Webpack、Rollup 等工具启用代码压缩、Tree Shaking 和 Dead Code Elimination。
npm run build性能分析与监控
使用 React DevTools 的 Profiler 工具分析组件渲染性能。结合 Chrome DevTools 的 Performance 面板，定位性能瓶颈。
// 在需要分析的组件外层包裹 Profiler
<React.Profiler id="MyComponent" onRender={callback}>
<MyComponent />
</React.Profiler>避免内联函数和对象
内联函数和对象会导致每次渲染时重新创建新的引用，触发子组件的重新渲染。尽量将函数和对象提升到组件外部或使用 useCallback 和 useMemo。
// 避免
function MyComponent() {
return <ChildComponent style={{ color: 'red' }} onClick={() => {}} />;
}
// 推荐
const styles = { color: 'red' };
const handleClick = () => {};
function MyComponent() {
return <ChildComponent style={styles} onClick={handleClick} />;
}优化 useEffect 依赖项
确保 useEffect 的依赖项数组准确反映所有依赖的变量，避免不必要的副作用执行。空数组表示只在挂载和卸载时执行。
useEffect(() => {
// 副作用逻辑
}, [dependency]);
