当前位置：首页 > React

react如何在render中做优化

2026-01-26 00:47:34React

避免不必要的重新渲染

使用 React.memo 对函数组件进行记忆化处理，避免在 props 未变化时重新渲染。对于类组件，可以通过继承 PureComponent 或手动实现 shouldComponentUpdate 来优化。

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]);

减少内联函数和对象

内联函数和对象会导致每次渲染时生成新的引用，可能触发子组件不必要的更新。尽量将函数和对象提取到组件外部或通过 useMemo/useCallback 缓存。

// 不推荐：内联函数
<button onClick={() => handleClick(id)}>Click</button>

// 推荐：缓存函数
const handleClick = useCallback((id) => { /* 逻辑 */ }, []);
<button onClick={handleClick}>Click</button>

虚拟化长列表

对于大型列表，使用虚拟滚动库（如 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={150} itemCount={1000} itemSize={35} width={300}>{Row}</List>;
}

避免在 render 中执行高开销操作

将数据转换、过滤等操作移到 useEffect 或 useMemo 中，避免阻塞渲染流程。

const processedData = useMemo(() => rawData.map(item => transform(item)), [rawData]);

使用 key 优化列表渲染

为列表项添加稳定的 key，帮助 React 识别节点变化，减少不必要的 DOM 操作。避免使用数组索引作为 key。

{items.map(item => <li key={item.id}>{item.name}</li>)}

组件拆分与懒加载

将复杂组件拆分为更小的子组件，利用 React.lazy 和 Suspense 实现按需加载，减少初始渲染压力。

react如何在render中做优化

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return <Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>;
}