react如何改善应用性能
使用React.memo优化组件渲染
将函数组件包裹在React.memo中，避免不必要的重新渲染。React.memo会对组件props进行浅比较，仅在props变化时重新渲染。
const MyComponent = 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]);虚拟化长列表
使用react-window或react-virtualized库实现列表虚拟化，仅渲染可视区域内的元素，减少DOM节点数量。
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>减少状态提升
将状态尽量下放到需要它的组件中，避免全局状态管理导致不必要的渲染。若需共享状态，考虑使用Context或状态管理库（如Redux、MobX）。
避免内联函数和对象
内联函数和对象会导致每次渲染时生成新的引用，触发子组件重新渲染。尽量将函数和对象提取到组件外部或使用useCallback/useMemo。
使用生产环境构建
确保部署时使用生产环境构建，React会移除开发模式下的警告和检查代码，减少包体积。通过Webpack或Vite等工具配置mode: 'production'。
性能分析工具
使用React DevTools的“Profiler”功能分析组件渲染时间，识别性能瓶颈。结合Chrome DevTools的“Performance”选项卡进行更深入的性能检测。
优化useEffect依赖项
避免在useEffect中依赖频繁变化的值，或通过useRef保存可变值但不触发重新渲染。确保依赖数组仅包含必要变量。
const valueRef = useRef(initialValue);
useEffect(() => {
// 使用valueRef.current避免依赖变化
}, [stableDependency]);服务端渲染（SSR）或静态生成
对SEO或首屏速度要求高的应用，考虑使用Next.js等框架实现服务端渲染（SSR）或静态站点生成（SSG），减少客户端加载压力。
