React Memo

React 的 memo 是 React 提供的一种优化工具，用于减少不必要的组件重新渲染，提升性能。以下是对 React memo 的中文讲解，涵盖核心概念、用法和注意事项，力求简洁清晰。

---

1. 什么是 React memo？

React.memo 是一个高阶组件（HOC），用于函数组件，通过比较 props 的变化来决定是否重新渲染组件。如果 props 没有变化，组件将跳过渲染，直接复用上一次的渲染结果，从而优化性能。

• 适用场景：函数组件接收相同的 props 时频繁重新渲染，且渲染成本较高。
• 不适用场景：类组件（使用 PureComponent 或 shouldComponentUpdate）或 props 频繁变化的组件。

---

2. 基本用法

React.memo 包裹函数组件，自动进行 props 的浅比较。

示例代码

import React, { memo } from 'react';

// 定义函数组件
const MyComponent = ({ name }) => {
  console.log('MyComponent 渲染了');
  return <div>姓名: {name}</div>;
};

// 使用 memo 包裹
const MemoizedComponent = memo(MyComponent);

// 父组件
function App() {
  const [count, setCount] = React.useState(0);
  const name = 'Alice'; // 固定不变的 prop

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数: {count}</button>
      <MemoizedComponent name={name} />
    </div>
  );
}

export default App;

说明

• MyComponent 被 memo 包裹后，只有当 name prop 变化时才会重新渲染。
• 点击按钮更新 count，App 重新渲染，但 MemoizedComponent 因 name 未变而跳过渲染（控制台不会打印“渲染了”）。

---

3. props 浅比较

React.memo 默认进行浅比较：

• 比较 props 的引用是否相同（===）。
• 如果 props 是对象、数组等复杂类型，需确保引用不变，否则 memo 失效。

示例：props 引用问题

function App() {
  const [count, setCount] = React.useState(0);
  const user = { name: 'Alice' }; // 每次渲染创建新对象

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数: {count}</button>
      <MemoizedComponent user={user} />
    </div>
  );
}

• 问题：每次 App 渲染，user 是新对象（引用不同），MemoizedComponent 会重新渲染。
• 解决：使用 useMemo 或 useState 确保引用稳定。

function App() {
  const [count, setCount] = React.useState(0);
  const user = React.useMemo(() => ({ name: 'Alice' }), []); // 固定引用

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数: {count}</button>
      <MemoizedComponent user={user} />
    </div>
  );
}

---

4. 自定义比较函数

可以通过 memo 的第二个参数自定义 props 比较逻辑。

示例

const MyComponent = ({ a, b }) => {
  console.log('渲染了');
  return <div>{a + b}</div>;
};

const MemoizedComponent = memo(MyComponent, (prevProps, nextProps) => {
  // 仅当 a 和 b 都未变化时返回 true（跳过渲染）
  return prevProps.a === nextProps.a && prevProps.b === nextProps.b;
});

• 自定义比较函数返回 true 表示不渲染，false 表示需要渲染。
• 谨慎使用，自定义比较可能增加开销，应确保比较逻辑简单。

---

5. 注意事项

1. 仅适用于函数组件：memo 不支持类组件，类组件使用 PureComponent 或 shouldComponentUpdate。
2. 浅比较局限：对于复杂对象 props，需配合 useMemo 或 useCallback 稳定引用。
3. 避免滥用：memo 增加代码复杂性和内存开销，仅在性能瓶颈明显时使用（如列表项组件）。
4. 不处理 state 或 context 变化：memo 只优化 props，组件内部 state 或 context 变化仍会触发渲染。

---

6. 常见场景

• 列表优化：在渲染大量列表项（如 <ListItem />）时，包裹子组件以避免不必要的渲染。
• 复杂组件：渲染成本高的组件（如包含复杂计算或 DOM 结构的组件）。
• 父组件频繁渲染：父组件因 state 变化频繁渲染，但子组件 props 未变。

示例：列表优化

const ListItem = memo(({ item }) => {
  console.log(`渲染项 ${item.id}`);
  return <li>{item.name}</li>;
});

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

---

7. 与 useMemo/useCallback 配合

• useMemo：稳定对象或数组的引用。
• useCallback：稳定函数引用，避免子组件因函数重新创建而失效。

示例

function Parent() {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(() => console.log('点击'), []); // 稳定函数

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>计数: {count}</button>
      <MemoizedComponent onClick={handleClick} />
    </div>
  );
}

---

8. 性能权衡

• 优点：减少不必要的渲染，提升性能，特别是在大型列表或复杂组件中。
• 缺点：增加代码复杂性，浅比较和内存占用的开销可能抵消收益。

---

9. 资源

• 官方文档：https://react.dev/reference/react/memo
• 中文社区：搜索“React memo 中文教程”或参考掘金、知乎等平台。

如果需要更详细的某部分讲解（如具体案例或性能分析），请告诉我！