从源码角度看React中的memo

最新推荐文章于 2025-08-15 10:51:23 发布

前端小天才小肚

最新推荐文章于 2025-08-15 10:51:23 发布

阅读量467

点赞数 4

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_66118130/article/details/146016982

最近决定看一下react源码中关于memo，useMemo，useCallback，目前看到了memo部分就准备写一篇文章，后续应该会继续更新。

先来看memeo的源码吧：

memo源码

以下是忽略 __DEV__ 后的简化版 memo

代码解读

复制代码

export function memo<Props>( type: React$ElementType, compare?: (oldProps: Props, newProps: Props) => boolean, ) { const elementType = { $$typeof: REACT_MEMO_TYPE, type, compare: compare === undefined ? null : compare, }; return elementType; }

其中：

type:一个有效的React组件
compare:可选的自定义比较函数，用于判断新旧 props 是否相等。如果未提供，则使用默认的浅比较。

可以看出，memo源码中，创建了一个elementType对象，其中

设置 $$typeof: REACT_MEMO_TYPE,可以使得react将其与普通对象相区别，从而快速判断这个组件是一个memo包装的组件
type：原始的组件（即传入的 type 参数）。
compare：自定义的比较函数（如果未提供，则为 null）。

memo的作用

避免不必要的重新渲染：当组件的 props 没有发生变化时，跳过组件的重新渲染
通过比较新旧 props 来决定是否需要更新：默认情况下，React.memo 使用浅比较来判断 props 是否发生变化。开发者也可以提供自定义的比较函数。

浅比较逻辑

那么问题来了，memo源码中并没有浅比较的代码，他是怎么实现浅比较的呢？

因为浅比较的逻辑是由 React 的渲染器（Reconciler）在组件更新时处理的，为不是在memo中实现

这种设计的好处是分离关注点，使代码更加模块化和可维护。

而浅比较的代码是下面这样的：

代码解读

复制代码

/** * Performs equality by iterating through keys on an object and returning false * when any key has values which are not strictly equal between the arguments. * Returns true when the values of all keys are strictly equal. */ //执行通过遍历对象的键并返回false，当任何键的值在参数之间不是严格相等时。 //当所有键的值都严格相等时返回true。 function shallowEqual(objA: mixed, objB: mixed): boolean { //如果两个值完全相等（包括 NaN 和 -0 的特殊情况），直接返回 true if (Object.is(objA, objB)) {//基础数据类型直接比较值，引用数据类型比较引用地址 return true; } //如果任意一个不是对象，或者为 null，则返回 false if ( typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null ) { return false; } //获取两个对象的键，并比较键的数量 const keysA = Object.keys(objA); const keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } //遍历键，检查每个键是否存在于另一个对象，并且对应的值是否相等 for (let i = 0; i < keysA.length; i++) { if ( !hasOwnProperty.call(objB, keysA[i]) || // 检查键是否存在 !Object.is(objA[keysA[i]], objB[keysA[i]]) // 比较值是否相等 ) { return false; } } // 如果所有检查都通过，则返回 true return true; }

逐步解析

使用 Object.is 判断是否完全相等
- 如果两个值完全相等（包括 NaN 和 -0 的特殊情况），直接返回 true。
- 这一步可以快速排除大部分简单的情况。
检查类型和 null
- 如果任意一个值不是对象（例如是原始值），或者为 null，则直接返回 false。
- 因为只有对象才需要进一步比较键和值。
比较键的数量
- 如果两个对象的键数量不同，则它们不可能相等，直接返回 false。
遍历键并比较值
- 遍历对象 objA 的所有键，检查：
  - 该键是否也存在于 objB 中（通过 hasOwnProperty 检查）。
  - 两个对象在该键上的值是否相等（通过 Object.is 比较）。
- 如果有任何一个键不满足条件，则返回 false。
返回结果
- 如果所有键和值都匹配，则返回 true。

至此就完成了浅比较

那么有了一个疑问，浅比较函数是在哪调用的呢？

再看源码

在packages/react-reconciler/src/ReactFiberBeginWork.js文件中有一个updateMemoComponent方法，他是实现memeo的关键，然后以下是memo的主要部分

代码解读

复制代码

const currentChild = ((current.child: any): Fiber); // This is always exactly one child //判断当前 Fiber 节点是否存在需要处理的更新（Update）或上下文（Context）变更 //都完成了返回true，否则返回false const hasScheduledUpdateOrContext = checkScheduledUpdateOrContext( current, renderLanes, ); if (!hasScheduledUpdateOrContext) { // This will be the props with resolved defaultProps, // unlike current.memoizedProps which will be the unresolved ones. // nextProps 将会是已经应用了 defaultProps 的 props， // 而 current.memoizedProps 保存的是未应用 defaultProps 的原始 props。 // 获取已解析的旧 props（包含 defaultProps 处理后的结果） const prevProps = currentChild.memoizedProps; // Default to shallow comparison // 使用自定义比较函数或默认的浅比较 let compare = Component.compare; compare = compare !== null ? compare : shallowEqual; // 比较 props 和 ref if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) { // 跳过子组件更新 return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes); } } // React DevTools reads this flag. workInProgress.flags |= PerformedWork; // 创建新的子 Fiber const newChild = createWorkInProgress(currentChild, nextProps); newChild.ref = workInProgress.ref; newChild.return = workInProgress; workInProgress.child = newChild; return newChild; }

updateMemoComponent函数首先判断当前的fiber节点是否存在需要处理的更新（组件自身调用setState等，不包括父组件传递props变化）或者上下文变更（仅检测通过 useContext 订阅的 Context 值的变化）

如果都完成了（无需更改），就进入if，看有没有自定义比较函数，没有就使用浅比较，比较新旧组件compare(prevProps, nextProps),是同一个就调用 bailoutOnAlreadyFinishedWork 函数来阻止组件重新渲染跳过子组件更新（跳过渲染）

如果没有完成（需要更改）就创建新的fiber节点

bailoutOnAlreadyFinishedWork 的核心逻辑如下：

代码解读

复制代码