react如何代码优化
代码拆分与懒加载
使用 React.lazy 和 Suspense 实现组件懒加载，减少初始加载时间。动态导入组件仅在需要时加载，适用于路由或非关键组件。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}避免不必要的重新渲染
通过 React.memo 缓存组件，避免因父组件更新导致的子组件无效渲染。适用于纯函数组件，依赖项未变化时跳过渲染。
const MemoizedComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});使用 useCallback 和 useMemo
缓存函数和计算结果，避免每次渲染时重新创建。useCallback 用于函数，useMemo 用于值。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);优化状态管理
避免将不相关的状态合并到同一 useState 中。拆分状态可减少不必要的更新。对于复杂状态逻辑，使用 useReducer 替代多个 useState。
const [state, dispatch] = useReducer(reducer, initialState);虚拟化长列表
使用库如 react-window 或 react-virtualized 渲染大型列表，仅渲染可见区域内容，大幅提升性能。
import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
function App() {
return (
<List height={600} itemCount={1000} itemSize={35} width={300}>
{Row}
</List>
);
}避免内联函数和对象
内联函数或对象会导致子组件每次接收新的 props 而重新渲染。将函数或对象提升到组件外部或使用 useMemo 缓存。
// 避免
<Child onClick={() => handleClick()} />
// 推荐
const handleClick = useCallback(() => { /* ... */ }, []);
<Child onClick={handleClick} />使用生产模式构建
开发模式下 React 包含警告和检查工具，影响性能。生产构建通过移除检查和启用压缩优化代码。
npm run build依赖项优化
检查 useEffect、useMemo 和 useCallback 的依赖项，避免频繁变化的值导致重复执行。空数组 [] 表示仅运行一次。
useEffect(() => {
fetchData();
}, [stableDependency]); // 确保依赖项稳定使用 React Profiler
通过 React DevTools 的 Profiler 分析组件渲染时间和原因，定位性能瓶颈并针对性优化。
服务端渲染（SSR）或静态生成
对于内容较静态的页面，使用 Next.js 等框架实现服务端渲染或静态生成，减少客户端渲染压力，提升首屏加载速度。
// Next.js 静态生成示例
export async function getStaticProps() {
const data = await fetchData();
return { props: { data } };
}
