react如何优化
优化 React 应用性能的方法
使用 React.memo 或 PureComponent
对于函数组件，使用 React.memo 避免不必要的重新渲染。类组件可以使用 PureComponent，它们通过浅比较 props 和 state 来减少渲染次数。
const MemoizedComponent = React.memo(function MyComponent(props) {
// 组件逻辑
});避免内联函数和对象
内联函数或对象会导致每次渲染时生成新的引用，触发子组件不必要的更新。可以将函数或对象提升到组件外部或使用 useCallback 和 useMemo。
const handleClick = useCallback(() => {
// 处理逻辑
}, [dependencies]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);代码分割与懒加载
使用 React.lazy 和 Suspense 动态加载组件，减少初始加载时间。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}虚拟化长列表
对于长列表渲染，使用库如 react-window 或 react-virtualized 仅渲染可见部分，减少 DOM 节点数量。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
function MyList() {
return (
<List height={150} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
);
}优化状态管理
避免将不必要的状态放在全局（如 Redux），优先使用局部状态。对于频繁更新的状态，考虑使用 useReducer 替代多个 useState。
使用生产环境构建
确保部署时使用生产模式构建，React 会移除开发环境的警告和优化代码。通过 Webpack 或 Vite 等工具启用压缩和代码混淆。
避免不必要的 Context 更新
将 Context 拆分为多个小范围 Provider，或使用 useMemo 优化传递给 Provider 的值，避免子组件因无关数据变化而重新渲染。
const MyContext = React.createContext();
function App() {
const value = useMemo(() => ({ theme: 'dark' }), []);
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}使用性能分析工具
通过 React DevTools 的 Profiler 或浏览器 Performance 选项卡分析渲染耗时，定位瓶颈组件。结合 why-did-you-render 库检测不必要的渲染原因。
服务端渲染（SSR）与静态生成
对于内容密集型应用，使用 Next.js 等框架实现 SSR 或静态生成（SSG），提升首屏加载速度和 SEO。
优化 useEffect 依赖项
精确指定 useEffect 的依赖数组，避免因依赖项变化过于频繁导致重复执行。必要时使用 useRef 存储可变值而不触发更新。
useEffect(() => {
// 仅在特定条件后执行
}, [dependency1, dependency2]);
