我们应该在什么场景下使用 useMemo 和 useCallback ？

useMemo 和 useCallback 是 React 中用于性能优化的两个 Hook，它们的作用是缓存值和函数，以避免不必要的重新计算或重新创建。虽然它们的功能相似，但适用场景有所不同。以下是它们的具体使用场景和区别：

---

1. useMemo

useMemo 用于缓存一个值，避免在每次渲染时都重新计算该值。

使用场景：

• 计算开销大的值 ：当某个值的计算逻辑比较复杂（例如，涉及大量数据运算或遍历）时，可以使用 useMemo 缓存结果。
• 依赖项变化时重新计算：只有当依赖项发生变化时，才会重新计算值，否则直接返回缓存的值。
• 避免不必要的渲染 ：当某个值作为 props 传递给子组件时，使用 useMemo 可以避免子组件因值的变化而重新渲染。

示例：

const expensiveValue = useMemo(() => {
  // 复杂的计算逻辑
  return computeExpensiveValue(a, b);
}, [a, b]); // 只有当 a 或 b 变化时，才会重新计算

适用场景：

1. 计算列表的过滤结果或排序结果。
2. 格式化或处理大量数据。
3. 避免将不必要的重新计算传递给子组件。

---

2. useCallback

useCallback 用于缓存一个函数，避免在每次渲染时都重新创建该函数。

使用场景：

• 函数作为依赖项 ：当某个函数被传递给子组件，或者作为其他 Hook 的依赖项时，使用 useCallback 可以避免因函数重新创建而导致的子组件重新渲染或 Hook 重新执行。
• 优化事件处理函数 ：当事件处理函数依赖于某些状态或属性时，使用 useCallback 可以确保函数的引用稳定。

示例：

const handleClick = useCallback(() => {
  // 处理点击事件
  console.log('Clicked:', value);
}, [value]); // 只有当 value 变化时，才会重新创建函数

适用场景：

1. 将函数作为 props 传递给子组件。
2. 函数作为 useEffect 或其他 Hook 的依赖项。
3. 避免因函数重新创建而导致的子组件重新渲染。

---

3. useMemo 和 useCallback 的区别

特性	useMemo	useCallback
返回值	缓存一个值	缓存一个函数
适用场景	缓存计算结果	缓存函数引用
优化目标	避免重复计算	避免函数重新创建
依赖项变化	依赖项变化时重新计算值	依赖项变化时重新创建函数
示例	const value = useMemo(() => a + b, [a, b]);	const fn = useCallback(() => {}, [a, b]);

---

4. 使用注意事项

1. 不要过度使用：

   • useMemo 和 useCallback 本身也有一定的开销（例如，依赖项的比较和缓存管理），因此不应滥用。
   • 只有在确实需要优化性能时（例如，计算开销大或组件渲染频繁）才使用它们。

2. 依赖项数组：

   • 确保依赖项数组中的值是正确的，否则可能导致缓存失效或意外的行为。
   • 如果依赖项数组为空（[]），则值或函数只会在组件挂载时计算或创建一次。

3. 与 React.memo 结合使用：

   • 当 useMemo 或 useCallback 用于优化传递给子组件的 props 时，可以结合 React.memo 进一步优化子组件的渲染性能。

---

5. 示例：结合使用 useMemo 和 useCallback

import React, { useState, useMemo, useCallback } from 'react';

function ExpensiveComponent({ value, onClick }) {
  // 假设这是一个渲染开销较大的组件
  return <button onClick={onClick}>{value}</button>;
}

function ParentComponent() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  // 缓存计算结果
  const sum = useMemo(() => {
    console.log('Calculating sum...');
    return a + b;
  }, [a, b]);

  // 缓存函数
  const handleClick = useCallback(() => {
    console.log('Sum:', sum);
  }, [sum]);

  return (
    <div>
      <ExpensiveComponent value={sum} onClick={handleClick} />
      <button onClick={() => setA(a + 1)}>Update A</button>
      <button onClick={() => setB(b + 1)}>Update B</button>
    </div>
  );
}

---

6. 总结

• useMemo：用于缓存计算结果，适用于计算开销大的场景。
• useCallback ：用于缓存函数引用，适用于函数作为 props 或依赖项的场景。
• 两者都应谨慎使用，避免过度优化。在实际开发中，结合 React.memo 可以进一步提升性能。