memo

性能优化 - 跳过不必要的组件重新渲染

核心概述

memo 是一个高阶组件,用于优化函数组件的性能。 如果组件的 props 没有改变,React 会跳过渲染该组件,并复用上次渲染的结果。

重要:memo 不会改变组件的行为,只是一个性能优化。 不要依赖它来防止渲染,而应该用于避免不必要的计算。

技术规格

TypeScript
function memo<P>(
  Component: FunctionComponent<P>,
  propsAreEqual?: (prevProps: P, nextProps: P) => boolean
): FunctionComponent<P>
TypeScript
const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
  // 只在 data 改变时才重新渲染
  return <div>{/* 复杂的渲染逻辑 */}</div>;
});

// 自定义比较函数
const MyComponent = memo(function MyComponent({ user, onClick }) {
  return <div onClick={onClick}>{user.name}</div>;
}, (prevProps, nextProps) => {
  // 只比较 user.id,而不是整个 user 对象
  return prevProps.user.id === nextProps.user.id;
});

延伸阅读