react如何实现性能优化
使用React.memo和useMemo避免不必要的渲染
React.memo用于缓存函数组件，仅在props发生变化时重新渲染。useMemo用于缓存计算结果，避免重复计算。适用于复杂计算或依赖项未变化的场景。
const MemoizedComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});
const expensiveCalculation = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);合理使用useCallback缓存函数
useCallback避免函数在每次渲染时重新创建，尤其适用于将函数作为props传递给子组件的情况。依赖项数组确保函数仅在依赖变化时更新。
const memoizedCallback = useCallback(() => {
doSomething(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>
);
<List height={150} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>代码分割与懒加载
通过React.lazy和Suspense实现组件懒加载，减少初始加载时间。动态导入结合路由拆分能显著提升首屏速度。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}避免内联函数和对象
内联函数和对象会导致子组件不必要的重新渲染。尽量将对象或函数提升到组件外部或使用useMemo/useCallback缓存。
使用生产模式构建
开发模式下React包含额外警告和检查，性能较差。生产构建通过去除调试代码和启用压缩优化性能。
npm run build使用Profiler分析性能
React DevTools的Profiler工具可识别渲染瓶颈，分析组件渲染时间和原因。结合Chrome Performance工具进一步定位问题。
优化状态管理
避免将不相关的状态放在同一Context中，拆分Context减少订阅组件的渲染。使用状态管理库（如Redux、Recoil）时选择性地订阅数据。
服务端渲染（SSR）与静态生成
Next.js等框架支持SSR或静态生成，提升首屏加载速度和SEO。根据场景选择适合的渲染方式。
避免频繁的DOM操作
直接操作DOM会绕过React的协调机制，导致性能问题。优先使用React的状态和props管理UI变化。
