当前位置：首页 > React

react组件如何优化

2026-02-12 05:16:10React

使用 React.memo 进行组件记忆

React.memo 是一个高阶组件，用于记忆函数组件的渲染结果。当组件的 props 没有变化时，React.memo 会复用上一次的渲染结果，避免不必要的重新渲染。适用于纯函数组件或 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]);

避免内联对象和函数

内联对象和函数会导致每次渲染时创建新的引用，触发子组件的重新渲染。应将对象和函数提升到组件外部或使用 useMemo/useCallback 进行优化。

// 避免
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />

// 推荐
const style = useMemo(() => ({ color: 'red' }), []);
const handleClick = useCallback(() => {}, []);
<ChildComponent style={style} onClick={handleClick} />

使用懒加载分割代码

React.lazy 和 Suspense 可以实现组件的懒加载，减少初始加载时的资源体积。适用于路由组件或非首屏关键组件。

const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

优化列表渲染

渲染长列表时使用虚拟化技术（如 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>

减少不必要的状态更新

避免在 useEffect 或事件处理中频繁调用 setState，尤其是连续多次调用。应合并状态更新或使用函数式更新确保基于最新状态。

// 避免
setCount(count + 1);
setCount(count + 1);

// 推荐
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);

使用 Context 时优化消费组件

当 Context 值变化时，所有消费组件都会重新渲染。可以通过拆分 Context 或将消费组件用 React.memo 包裹来减少不必要的渲染。

const ThemeContext = React.createContext();
const MemoizedChild = React.memo(function Child({ theme }) {
  return <div>{theme}</div>;
});
function Parent() {
  const theme = useContext(ThemeContext);
  return <MemoizedChild theme={theme} />;
}

避免在渲染中执行高开销操作

渲染函数中应避免直接执行数据转换、复杂计算或数据请求等操作。这些操作应放在 useEffect、useMemo 或事件处理中。

// 避免
function Component({ items }) {
  const filteredItems = items.filter(item => item.isActive);
  return <List items={filteredItems} />;
}

// 推荐
function Component({ items }) {
  const filteredItems = useMemo(() => items.filter(item => item.isActive), [items]);
  return <List items={filteredItems} />;
}