如何优化react
优化 React 性能的方法
使用 React.memo 进行组件记忆
React.memo 是一个高阶组件，用于缓存函数组件的渲染结果，避免不必要的重新渲染。只有当组件的 props 发生变化时，才会重新渲染。适用于纯展示型组件或 props 变化较少的场景。
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]);避免内联函数和对象
在渲染方法中避免直接创建函数或对象，因为每次渲染都会生成新的引用，导致子组件不必要的更新。应将函数或对象提取到组件外部或使用 useCallback/useMemo 缓存。
使用懒加载（React.lazy 和 Suspense）
通过代码分割动态加载组件，减少初始加载时间。React.lazy 用于动态导入组件，Suspense 提供加载中的回退 UI。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}优化列表渲染（key 属性和虚拟列表）
为列表项提供稳定且唯一的 key，避免使用索引作为 key。对于长列表，使用虚拟列表技术（如 react-window 或 react-virtualized）仅渲染可见部分。
import { FixedSizeList as List } from 'react-window';
function MyList({ data }) {
return (
<List height={400} itemCount={data.length} itemSize={50} width={300}>
{({ index, style }) => <div style={style}>{data[index]}</div>}
</List>
);
}减少不必要的状态更新
避免在 useEffect 或事件处理中频繁更新状态，尤其是会引起大规模重新渲染的状态。合并多个状态更新或使用 useReducer 管理复杂状态逻辑。
使用生产环境构建
确保生产环境使用压缩和优化的 React 构建版本。通过 Webpack、Rollup 等工具启用代码压缩（TerserPlugin）和 Tree Shaking 移除未使用代码。
使用性能分析工具
通过 React DevTools 的 Profiler 分析组件渲染时间和原因。使用 Chrome DevTools 的 Performance 面板记录并分析运行时性能问题。
服务端渲染（SSR）或静态生成（SSG）
对于内容密集型应用，考虑使用 Next.js 等服务端渲染框架，提升首屏加载速度和 SEO 效果。静态生成适合内容变化较少的页面。
避免 Context 的频繁更新
将 Context 拆分为多个独立 Context，避免单一 Context 包含过多数据导致不必要的订阅者更新。对不变数据可使用默认值而非 Context。
常见优化场景示例
优化大型表单
对于包含大量输入的表单，避免每个输入变化都触发全局状态更新。可使用表单库（如 Formik 或 React Hook Form）或局部状态管理。
优化动画性能
使用 CSS 动画或 transform 属性而非直接修改 DOM 样式。对于复杂动画，考虑使用 React Spring 或 Framer Motion 等专用动画库。
优化数据获取
避免在组件渲染时直接请求数据，应在 useEffect 中处理。对于频繁更新的数据，考虑使用 SWR 或 React Query 实现缓存和自动更新。
