解析 useMemo 与 useCallback：Fiber 节点更新阶段的依赖对比机制
各位编程领域的同仁，大家好。今天我们深入探讨 React 性能优化的核心工具——useMemo 和 useCallback。这两个 Hook 在日常开发中被广泛使用，但其底层机制，尤其是在 React Fiber 架构下，它们是如何进行依赖对比（Shallow Compare）的，却常常被忽视。理解这一机制，对于我们编写高性能、可维护的 React 应用至关重要。
一、React 更新机制概述：从虚拟 DOM 到 Fiber
在深入 useMemo 和 useCallback 之前，我们必须先对 React 的更新机制有一个宏观的理解。早期 React 采用的是基于递归的虚拟 DOM 调和（Reconciliation）算法，这个过程是同步且不可中断的。当组件树变得庞大时，会导致长时间的 JavaScript 阻塞，影响用户体验。
为了解决这个问题，React 引入了 Fiber 架构。Fiber 是对核心调和算法的重写，它将协调过程拆分为多个小的、可中断的工作单元。这使得 React 能够：
- 增量渲染（Incremental Rendering）：将渲染工作拆分成小块，在多个帧中执行，避免长时间阻塞主线程。
- 暂停、中止和重用工作（Pause, Abort, and Reuse Work）：根据优先级调度工作，允许更高优先级的更新（如用户输入）中断当前正在进行的低优先级工作。
- 并发模式（Concurrent Mode）：这是 Fiber 架构的最终目标，通过更智能的调度策略，提高应用的响应性和流畅性。
Fiber 架构将整个更新过程分为两个主要阶段：
-
渲染/协调阶段（Render/Reconciliation Phase）：
- 此阶段是纯计算，不涉及 DOM 操作。
- React 会遍历组件树，生成新的 Fiber 树（
workInProgresstree）。 - 它会对比新旧 Fiber 节点（
currenttree 和workInProgresstree），找出需要更新的部分。 useMemo和useCallback的依赖对比就发生在这个阶段。- 此阶段可被中断。
-
提交阶段（Commit Phase）：
- 此阶段是同步的，不可中断。
- React 会将渲染阶段计算出的所有变更一次性应用到真实 DOM 上。
- 包括 DOM 的插入、更新、删除，以及执行生命周期方法（如
componentDidMount、componentDidUpdate、useEffect的清理和执行）。
理解这两个阶段的划分至关重要，因为 useMemo 和 useCallback 的作用正是优化渲染阶段的计算成本，通过避免不必要的函数执行或值计算来提升性能。
二、useMemo 解析：值的记忆化与依赖对比
useMemo Hook 允许你记忆（memoize）一个计算结果。它只会在其依赖项发生变化时才重新计算该值。
2.1 useMemo 的基本用法
useMemo 接收两个参数：一个“创建函数”（factory）和一个依赖项数组（deps）。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);factory：一个函数，它返回你想要记忆的值。React 会在组件初次渲染时调用它，并在后续渲染中，如果依赖项发生变化，也会调用它。deps：一个数组，包含factory函数所依赖的所有值。
2.2 useMemo 在 Fiber 节点更新阶段的依赖对比
当一个组件首次渲染时，useMemo 会执行其 factory 函数，并将返回的值以及当前的依赖项数组存储在与当前 Fiber 节点关联的内部数据结构中。在后续的渲染中，React 如何决定是否重新执行 factory 函数呢？这就是依赖对比发挥作用的地方。
在 Fiber 架构中，每个 Hook 的状态都存储在当前 Fiber 节点的 memoizedState 属性上。这个 memoizedState 实际上是一个链表，每个节点代表一个 Hook。对于 useMemo 而言，其链表节点会存储上次计算的结果和上次的依赖项数组。
让我们模拟这个过程：
初次渲染（Mounting）:
- React 遇到
useMemo(() => computeExpensiveValue(a, b), [a, b])。 - 它调用
factory函数computeExpensiveValue(a, b)。 - 将计算结果
value和依赖数组[a, b]存储在当前 Fiber 节点的memoizedState链表中。// 假设 Fiber 节点的 memoizedState 结构简化如下： // currentFiber.memoizedState = { // hookType: 'useMemo', // memoizedState: value, // 上次记忆的值 // deps: [a, b], // 上次记忆的依赖项 // next: null // 下一个 Hook // };
后续更新（Updating）:
- 组件重新渲染，React 再次遇到同一个
useMemo调用。 - React 从当前 Fiber 节点的
memoizedState链表中找到对应useMemoHook 上次存储的状态。 - 它获取上次存储的依赖项数组
prevDeps和本次渲染传递的依赖项数组nextDeps。 - 执行浅层对比（Shallow Compare）：逐个比较
prevDeps和nextDeps中的元素。- 如果两个数组的长度不同，则认为依赖项已改变。
- 如果两个数组的长度相同，则从索引 0 开始，逐个比较
prevDeps[i]与nextDeps[i]。 - 比较使用的是
Object.is语义，对于大多数基本类型，这等同于===严格相等判断。Object.is(NaN, NaN)返回true，而NaN === NaN返回false。Object.is(-0, 0)返回false，而-0 === 0返回true。- 在实际应用中，这些细微差别通常不影响
useMemo/useCallback的行为。
- 根据对比结果决定行为：
- 如果所有依赖项都相等（浅层相等）：React 不会执行
factory函数，而是直接返回上次存储的memoizedState（即上次计算的值）。 - 如果任何一个依赖项不相等：React 会重新执行
factory函数，并将新的计算结果和新的依赖项数组存储起来，供下次渲染使用。然后返回新的计算结果。
- 如果所有依赖项都相等（浅层相等）：React 不会执行
2.3 浅层对比的实现细节（伪代码）
在 React 内部，这个浅层对比逻辑通常抽象为一个名为 areHookInputsEqual 或类似功能的函数。
function areHookInputsEqual(prevDeps, nextDeps) {
if (prevDeps === null || nextDeps === null) {
// 这通常发生在初次挂载或 deps 数组为 null/undefined 的边缘情况，
// 在实际 useMemo/useCallback 中，deps 总是数组。
return false;
}
if (prevDeps.length !== nextDeps.length) {
return false; // 长度不同，肯定不相等
}
for (let i = 0; i < prevDeps.length; i++) {
// 使用 Object.is 进行严格相等比较
if (!Object.is(prevDeps[i], nextDeps[i])) {
return false; // 发现不相等项，依赖项已改变
}
}
return true; // 所有依赖项都浅层相等
}2.4 useMemo 示例与浅层对比的影响
示例 1：基本类型依赖项
import React, { useState, useMemo } from 'react';
function ProductDisplay({ price, quantity }) {
console.log('ProductDisplay renders');
// 依赖 price 和 quantity，它们是基本类型
const total = useMemo(() => {
console.log('Calculating total...');
return price * quantity;
}, [price, quantity]); // 依赖数组包含基本类型
return (
<div>
<p>Price: ${price}</p>
<p>Quantity: {quantity}</p>
<p>Total: ${total}</p>
</div>
);
}
function App() {
const [productPrice, setProductPrice] = useState(10);
const [productQuantity, setProductQuantity] = useState(2);
const [otherState, setOtherState] = useState(0);
return (
<div>
<h1>Shopping Cart</h1>
<ProductDisplay price={productPrice} quantity={productQuantity} />
<button onClick={() => setProductPrice(productPrice + 1)}>Increase Price</button>
<button onClick={() => setProductQuantity(productQuantity + 1)}>Increase Quantity</button>
<hr />
<p>Other State: {otherState}</p>
<button onClick={() => setOtherState(otherState + 1)}>Update Other State (no effect on total)</button>
</div>
);
}分析：
- 当
productPrice或productQuantity改变时，[price, quantity]依赖数组中的元素会发生变化。useMemo的浅层对比会发现不同，total会被重新计算。 - 当
otherState改变时，App组件会重新渲染，ProductDisplay也会重新渲染。但ProductDisplay接收的price和quantityprops 引用未变（它们是基本类型，值未变），所以[price, quantity]依赖数组经过浅层对比后会发现所有元素都相等。useMemo不会重新执行Calculating total...，而是直接返回上次记忆的total值。ProductDisplay renders仍然会打印，因为组件本身重新渲染了，但昂贵的计算被跳过。
示例 2：对象/数组类型依赖项（常见陷阱）
import React, { useState, useMemo } from 'react';
function ItemList({ itemsData }) {
console.log('ItemList renders');
// 假设 itemsData 是一个复杂的对象数组，需要进行深度处理
const processedItems = useMemo(() => {
console.log('Processing items...');
return itemsData.map(item => ({ ...item, displayPrice: `$${item.price.toFixed(2)}` }));
}, [itemsData]); // 依赖数组包含对象
return (
<div>
<h2>Items:</h2>
<ul>
{processedItems.map(item => (
<li key={item.id}>{item.name}: {item.displayPrice}</li>
))}
</ul>
</div>
);
}
function App() {
const [dataVersion, setDataVersion] = useState(0);
const [otherCounter, setOtherCounter] = useState(0);
// 每次 App 渲染都会创建一个新的 items 数组和对象
const items = [
{ id: 1, name: `Item A v${dataVersion}`, price: 10.50 },
{ id: 2, name: `Item B v${dataVersion}`, price: 20.75 }
];
return (
<div>
<h1>Inventory</h1>
<ItemList itemsData={items} />
<button onClick={() => setDataVersion(dataVersion + 1)}>Update Items Data</button>
<hr />
<p>Other Counter: {otherCounter}</p>
<button onClick={() => setOtherCounter(otherCounter + 1)}>Increment Counter</button>
</div>
);
}分析：
在这个例子中，即使 dataVersion 没有改变，每次 App 组件渲染时（例如通过点击 Increment Counter 按钮），items 数组都会被重新创建。这意味着 items 变量会指向一个新的数组引用。
当 ItemList 接收 itemsData prop 时：
- 初次渲染：
itemsData是一个数组引用 A。useMemo存储[A]。 setOtherCounter触发App重新渲染：items变量现在指向一个新的数组引用 B。ItemList接收itemsData = B。useMemo进行浅层对比：[A]vs[B]。由于A !== B（引用不同），对比结果为不相等。- 结果：
Processing items...仍然会被打印，processedItems也会被重新计算，useMemo失去了它的优化作用。
解决方案：
要使 useMemo 对对象/数组依赖项生效，你必须确保传入的依赖项引用是稳定的。通常这意味着依赖项本身也是记忆化的，或者它们来自稳定的源（如 props 或 useState 的返回值）。
// ... (App 组件内部)
const initialItems = useMemo(() => [
{ id: 1, name: 'Item A', price: 10.50 },
{ id: 2, name: 'Item B', price: 20.75 }
], []); // 初始数据，只创建一次
const items = useMemo(() => {
// 只有当 dataVersion 改变时才创建新的 items 数组
return initialItems.map(item => ({ ...item, name: `${item.name} v${dataVersion}` }));
}, [initialItems, dataVersion]); // 依赖 initialItems 和 dataVersion
// ...现在，只有当 dataVersion 改变时，items 数组的引用才会改变，ItemList 内部的 useMemo 才会重新处理 itemsData。如果 otherCounter 改变，items 的引用是稳定的，ItemList 的 useMemo 会跳过重新计算。
| 依赖项类型 | 依赖项值不变（浅层） | 依赖项值改变（浅层） | useMemo 行为 |
|---|---|---|---|
| 基本类型 | 1 === 1 |
1 !== 2 |
跳过计算 / 重新计算 |
| 对象/数组引用 | objA === objA |
objA !== objB |
跳过计算 / 重新计算 (即使内容相同，引用不同也会重新计算) |
| 函数引用 | funcA === funcA |
funcA !== funcB |
跳过计算 / 重新计算 (即使逻辑相同，引用不同也会重新计算) |
三、useCallback 解析：函数的记忆化与依赖对比
useCallback Hook 用于记忆（memoize）一个函数。它返回一个记忆化的回调函数，只有当它的依赖项发生变化时，这个函数才会被重新创建。
3.1 useCallback 的基本用法
useCallback 接收两个参数：一个回调函数（callback）和一个依赖项数组（deps）。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);callback：你想要记忆的函数。deps：一个数组，包含callback函数所依赖的所有值。
3.2 useCallback 在 Fiber 节点更新阶段的依赖对比
useCallback 的依赖对比机制与 useMemo 几乎完全相同。
初次渲染（Mounting）:
- React 遇到
useCallback(() => doSomething(a, b), [a, b])。 - 它将
callback函数本身以及当前的依赖项数组[a, b]存储在当前 Fiber 节点的memoizedState链表中。// 假设 Fiber 节点的 memoizedState 结构简化如下： // currentFiber.memoizedState = { // hookType: 'useCallback', // memoizedState: callbackFunction, // 上次记忆的函数引用 // deps: [a, b], // 上次记忆的依赖项 // next: null // 下一个 Hook // };
后续更新（Updating）:
- 组件重新渲染，React 再次遇到同一个
useCallback调用。 - React 从当前 Fiber 节点的
memoizedState链表中找到对应useCallbackHook 上次存储的状态。 - 它获取上次存储的依赖项数组
prevDeps和本次渲染传递的依赖项数组nextDeps。 - 执行浅层对比（Shallow Compare），与
useMemo的逻辑完全一致：逐个比较prevDeps和nextDeps中的元素，使用Object.is进行严格相等判断。 - 根据对比结果决定行为：
- 如果所有依赖项都相等（浅层相等）：React 不会创建新的回调函数，而是直接返回上次存储的
memoizedState（即上次记忆的函数引用）。 - 如果任何一个依赖项不相等：React 会重新创建
callback函数（新的函数引用），并将新的函数引用和新的依赖项数组存储起来，供下次渲染使用。然后返回新的函数引用。
- 如果所有依赖项都相等（浅层相等）：React 不会创建新的回调函数，而是直接返回上次存储的
3.3 为什么需要记忆化函数？
useCallback 的主要目的是优化子组件的渲染。当一个父组件重新渲染时，它内部定义的任何函数都会在每次渲染时被重新创建。这意味着这些函数会拥有新的引用。
如果这些函数作为 props 传递给子组件，并且子组件使用了 React.memo（或是一个 PureComponent），那么即使子组件的实际逻辑不需要更新，由于它接收到的函数 prop 引用变了，React.memo 的浅层对比也会认为 prop 发生了变化，从而导致子组件不必要的重新渲染。
useCallback 确保了函数引用的稳定性，从而允许 React.memo 有效地阻止子组件的不必要渲染。
3.4 useCallback 示例与浅层对比的影响
import React, { useState, useCallback, memo } from 'react';
// 子组件，使用 React.memo 进行优化
const ChildComponent = memo(({ onClick }) => {
console.log('ChildComponent renders');
return <button onClick={onClick}>Click Me (Child)</button>;
});
function ParentComponent() {
const [count, setCount] = useState(0);
const [data, setData] = useState(0);
// 每次 ParentComponent 渲染，这个函数都会重新创建
// 如果不使用 useCallback，它的引用会一直变化
const handleClickWithoutCallback = () => {
console.log('Button clicked without callback. Count:', count);
setCount(prev => prev + 1);
};
// 使用 useCallback 记忆函数
const handleClickWithCallback = useCallback(() => {
console.log('Button clicked with callback. Count:', count);
setCount(prev => prev + 1);
}, [count]); // 依赖 count
return (
<div>
<h1>Parent Component</h1>
<p>Count: {count}</p>
<p>Data: {data}</p>
<button onClick={() => setData(data + 1)}>Update Data (Parent)</button>
<hr />
{/* 传递没有记忆化的函数 */}
<h2>Without useCallback:</h2>
<ChildComponent onClick={handleClickWithoutCallback} />
{/* 传递记忆化的函数 */}
<h2>With useCallback:</h2>
<ChildComponent onClick={handleClickWithCallback} />
</div>
);
}
function App() {
return <ParentComponent />;
}分析：
- 初次渲染：
ParentComponent渲染，handleClickWithoutCallback和handleClickWithCallback（依赖count=0）都被创建。两个ChildComponent都会渲染。 - 点击 "Update Data (Parent)" 按钮：
data状态改变，ParentComponent重新渲染。handleClickWithoutCallback再次被创建，拥有新的函数引用。handleClickWithCallback：useCallback进行依赖对比[count]vs[count](此时count仍然是 0)。由于0 === 0，依赖项未变。useCallback返回上次记忆的函数引用。- 结果：
ChildComponent(without useCallback) 接收到新的onClickprop 引用，React.memo发现 prop 变化，重新渲染。ChildComponent(with useCallback) 接收到相同的onClickprop 引用，React.memo发现 prop 未变，跳过渲染。- 控制台会打印一次
ChildComponent renders(来自没有useCallback的那个)。
- 点击 "Click Me (Child)" 按钮 (任意一个)：
count状态改变，ParentComponent重新渲染。handleClickWithoutCallback再次被创建，拥有新的函数引用。handleClickWithCallback：useCallback进行依赖对比[prevCount]vs[newCount]。由于prevCount !== newCount，依赖项已改变。useCallback重新创建handleClickWithCallback函数，返回新的函数引用。- 结果：两个
ChildComponent都会接收到新的onClickprop 引用，都会重新渲染。这是预期的行为，因为count改变，回调函数需要捕获新的count值。
3.5 什么时候使用 useCallback？
- 将回调函数作为 props 传递给经过
React.memo包装的子组件时。 这是useCallback最主要的用例，用于防止子组件不必要的重新渲染。 - 作为
useEffect、useMemo、useRef等 Hook 的依赖项时。 如果你的useEffect或useMemo依赖于一个函数，你可能希望这个函数本身也是稳定的，以避免不必要的副作用执行或值重算。 - 需要稳定函数引用用于事件监听器或某些外部库集成时。 例如，当你将一个函数传递给
addEventListener时，你可能需要一个稳定的引用来正确地添加和移除事件监听器。
3.6 useCallback 的空依赖数组 []
当 useCallback 的依赖数组为空 [] 时，这意味着该回调函数在组件的整个生命周期中只会被创建一次。它将始终引用初次渲染时捕获的变量值。
const handleClickOnce = useCallback(() => {
console.log('Count:', count); // 这里的 count 永远是初次渲染时的值
// setCount(prev => prev + 1); // 如果依赖了 count，这里会有 stale closure 问题
}, []);陷阱： 如果回调函数内部使用了组件状态或 props，而这些状态或 props 不在依赖数组中，就会出现 闭包陷阱（Stale Closures）。回调函数会“记住”初次渲染时 count 的值，即使 count 后来更新了，它仍然访问旧值。
正确做法： 总是将回调函数内部使用的所有组件作用域的变量（props, state, 由其他 Hook 返回的值）都包含在依赖数组中。ESLint 的 exhaustive-deps 规则可以帮助你捕获这些问题。
四、Fiber 节点内部的 Hook 存储与更新
为了更深入地理解 useMemo 和 useCallback 的工作原理，我们需要了解 React 是如何在 Fiber 节点中存储 Hook 状态的。
每个 Fiber 节点都有一个 memoizedState 属性。对于使用了 Hook 的组件，这个 memoizedState 并不是一个简单的值，而是一个链表（linked list），其中每个节点代表一个 Hook 的状态。
Hook 链表结构（简化）：
// A simplified representation of a Hook node in the linked list
interface Hook {
memoizedState: any; // The actual state/value of the hook (e.g., useMemo's value, useState's state)
queue: any; // For useState/useReducer, this holds the update queue
next: Hook | null; // Pointer to the next hook in the list
// For useMemo/useCallback, an additional field might be used to store dependencies
// deps: Array<any>;
}当 React 渲染一个组件时，它会按顺序调用 Hook。在 renderWithHooks 函数（内部函数，用于处理带有 Hook 的组件）中，有一个 workInProgressHook 指针，它会随着 Hook 的调用而前进，遍历这个链表。
初次挂载时 (mountMemo / mountCallback):
- 当
useMemo或useCallback首次被调用时，React 会创建一个新的Hook对象。 - 将
factory/callback的执行结果（对于useMemo）或callback函数本身（对于useCallback）存储到memoizedState字段。 - 将当前的依赖项数组存储到
deps字段。 - 将这个新的
Hook对象添加到当前 Fiber 节点的memoizedState链表的末尾。
更新时 (updateMemo / updateCallback):
- 当组件重新渲染，React 再次遇到
useMemo或useCallback调用时，它会从 Fiber 节点的memoizedState链表中取出对应的上一个Hook对象（通过workInProgressHook指针）。 - 获取上一个
Hook对象的deps字段（prevDeps）。 - 获取当前
useMemo/useCallback调用传递的依赖项数组（nextDeps）。 - 调用
areHookInputsEqual(prevDeps, nextDeps)进行浅层对比。 - 如果对比结果为
true(依赖项未变)：- React 不会执行
factory函数或创建新的callback函数。 - 它直接从上一个
Hook对象的memoizedState字段中取出上次记忆的值或函数引用，并返回。 - 然后，它会将上一个
Hook对象的deps字段更新为nextDeps（尽管它们相等，但这是内部机制确保最新状态）。
- React 不会执行
- 如果对比结果为
false(依赖项已变)：- React 执行
factory函数或创建新的callback函数。 - 将新的结果或函数引用存储到当前
Hook对象的memoizedState字段。 - 将
nextDeps存储到当前Hook对象的deps字段。 - 返回新的结果或函数引用。
- React 执行
这个链表结构和逐个对比的机制，使得 React 能够在 O(N) 的时间复杂度内（N 为依赖项数量）完成依赖项的检查，从而高效地决定是否执行昂贵的计算或创建新的函数。
五、何时使用与何时避免 useMemo 和 useCallback
虽然 useMemo 和 useCallback 是强大的优化工具，但并非万能药，也并非总是需要。
5.1 使用场景
- 优化昂贵的计算： 当一个函数的执行需要大量计算资源，并且其结果在依赖项不变的情况下可以重复使用时，使用
useMemo。const sortedList = useMemo(() => sortLargeArray(data), [data]); - 防止子组件不必要的渲染： 当你将对象、数组或函数作为 props 传递给使用
React.memo包装的子组件时，使用useMemo记忆对象/数组，使用useCallback记忆函数。const user = useMemo(() => ({ name: 'Alice', age: 30 }), []); const handleSave = useCallback(() => { /* ... */ }, [userId]); <MemoizedChild user={user} onSave={handleSave} /> - 作为 Hook 的依赖项： 当一个对象或函数被用作
useEffect、useMemo、useCallback的依赖项时，为了避免不必要的副作用或重计算，通常需要确保这个对象或函数的引用稳定性。useEffect(() => { // do something with fetchUser (which might be a useCallback'd function) }, [fetchUser]); - 提供稳定的引用给外部 API 或 DOM 事件监听器： 有些 API 要求回调函数引用保持稳定。
useEffect(() => { window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [handleScroll]); // handleScroll 应该是一个 useCallback 函数
5.2 避免场景
- 过早优化： 除非你已经确定存在性能瓶颈，否则不要盲目使用
useMemo和useCallback。它们本身也有开销（存储依赖项、进行浅层对比）。对于简单的计算或频繁变化的依赖项，它们的开销可能大于收益。 - 不必要的记忆： 如果一个函数或值只在当前组件内部使用，并且不作为 prop 传递给
React.memo子组件，通常不需要记忆化。// BAD: 这里的 greetMsg 每次渲染都会重新计算，但它不昂贵，且没有作为 prop 传递 // const greetMsg = useMemo(() => `Hello, ${name}!`, [name]); const greetMsg = `Hello, ${name}!`; // 直接计算即可 - 依赖项不稳定的对象/数组： 如果你的依赖项是每次渲染都重新创建的复杂对象或数组，
useMemo/useCallback的浅层对比会总是失败，导致它们失去作用。在这种情况下，你需要先解决依赖项的稳定性问题。 - 只为了防止组件自身重新渲染：
useMemo和useCallback并不能阻止组件本身的渲染。它们只是阻止组件内部的特定计算或函数创建。要阻止组件自身重新渲染，你需要使用React.memo（对于函数组件）或PureComponent（对于类组件）。
六、常见陷阱与最佳实践
-
忘记添加依赖项： 这是最常见的错误，会导致闭包陷阱。
useMemo和useCallback会记住旧值，即使它们依赖的状态或 props 已经更新。ESLint 的exhaustive-deps规则是你的救星，务必开启并遵循它。// BAD: effect will only run once, and count will always be 0 // const increment = useCallback(() => setCount(count + 1), []); // GOOD: effect will run when count changes, and uses the latest count const increment = useCallback(() => setCount(count + 1), [count]); // OR, even better for state updates: const increment = useCallback(() => setCount(prevCount => prevCount + 1), []); // No dependency on count needed -
在依赖数组中包含不稳定引用： 如前所述，如果在依赖数组中包含了每次渲染都会重新创建的对象、数组或函数，
useMemo/useCallback将会失效。确保依赖项的引用稳定性。// BAD: options object is recreated every render // const memoizedData = useMemo(() => fetchData(id, { mode: 'strict' }), [id, { mode: 'strict' }]); // GOOD: options object is stable const stableOptions = useMemo(() => ({ mode: 'strict' }), []); const memoizedData = useMemo(() => fetchData(id, stableOptions), [id, stableOptions]); - 过度使用： 并非所有函数和值都需要记忆化。简单的计算和不作为 props 传递给
React.memo组件的函数，通常直接定义即可。useMemo和useCallback本身有内存和 CPU 开销。 - 不配合
React.memo使用useCallback：useCallback的最大价值在于配合React.memo优化子组件渲染。如果子组件没有被React.memo包装，那么即使函数引用稳定，子组件也会在父组件渲染时一同渲染。
七、总结与展望
useMemo 和 useCallback 是 React 提供的重要优化手段，它们通过在 Fiber 节点的渲染阶段进行依赖项的浅层对比，来决定是否跳过昂贵的计算或避免创建新的函数引用。这种机制使得 React 能够更高效地进行调和，尤其是在处理大型、复杂组件树时。
理解浅层对比的原理，尤其是它如何处理基本类型与对象/函数引用，是正确使用这两个 Hook 的关键。始终关注依赖项的稳定性，并结合 ESLint 规则进行开发，能够帮助我们构建出性能卓越且易于维护的 React 应用。随着 React 并发模式的成熟，对这些 Hook 的深入理解将变得更加重要，因为它们是 React 精细化控制渲染行为的基石。