1 ）概述
React.memo 来创建一个具有类似于 pure component 特性的 function component2 ）源码
定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L237
进入 updateMemoComponent
function updateMemoComponent(
current: Fiber | null,
workInProgress: Fiber,
Component: any,
nextProps: any,
updateExpirationTime,
renderExpirationTime: ExpirationTime,
): null | Fiber {
// 进来之后, 也是要先判断current是否等于null
// 因为对于current是否等于null, 在update的一个过程当中非常重要
// 它是用来辨别我们这个组件是第一次渲染还是非第一次渲染的情况
// 这里是 第一次渲染的情况
if (current === null) {
// 获取 type
// 是在创建 memo 的时候，它 return 的是一个 `{ $$typeof: REACT_MEMO_TYPE, type }`
// 然后它的type是传进来的 function component
// 在这里获取的 type 是一个function component
let type = Component.type;
// 注意，这里，compare 是 调用 memo 时，传递的 第二个参数
// 用于对比新老props是否有变化的一个函数, 类似于 SCU
// 在我们每一次组件更新的过程当中，都会调用那个方法，判断这个组件是否需要更新
if (isSimpleFunctionComponent(type) && Component.compare === null) {
// If this is a plain function component without default props,
// and with only the default shallow comparison, we upgrade it
// to a SimpleMemoComponent to allow fast path updates.
workInProgress.tag = SimpleMemoComponent;
workInProgress.type = type;
// 符合上述 if 条件，会按照 下面这个函数 去更新组件
return updateSimpleMemoComponent(
current,
workInProgress,
type,
nextProps,
updateExpirationTime,
renderExpirationTime,
);
}
// 不符合上述条件，第一次渲染的情况，调用 createFiberFromTypeAndProps 获取 child
// 不需要调用 reconcileChildren 来减少运行时开销，为什么是这样呢？
// 因为它的children是非常明确的，就是 function component
// 所以它传入这个type就是function component
// nextprops就是放到 memo component上面的 props
// 因为这个props实际是要传给具体的 function component
// 以及传入 mode 和 renderExpirationTime
let child = createFiberFromTypeAndProps(
Component.type,
null,
nextProps,
null,
workInProgress.mode,
renderExpirationTime,
);
// 并挂载
child.ref = workInProgress.ref;
child.return = workInProgress;
workInProgress.child = child;
return child;
}
// 对于不是第一次渲染
let currentChild = ((current.child: any): Fiber); // This is always exactly one child
// 如果组件需要更新
if (updateExpirationTime < renderExpirationTime) {
// This will be the props with resolved defaultProps,
// unlike current.memoizedProps which will be the unresolved ones.
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,
renderExpirationTime,
);
}
}
// React DevTools reads this flag.
workInProgress.effectTag |= PerformedWork;
// 正常更新
//
let newChild = createWorkInProgress(
currentChild,
nextProps,
renderExpirationTime,
);
newChild.ref = workInProgress.ref;
newChild.return = workInProgress;
workInProgress.child = newChild;
return newChild;
}
进入 isSimpleFunctionComponent
// 它首先判断这个type是否是一个function，以及是否没有 construct 方法，以及它没有 defaultProps 这个属性
// 也就是说它没有这些类似于 class component 的一些属性
// 它就是一个纯 function component
export function isSimpleFunctionComponent(type: any) {
return (
typeof type === 'function' &&
!shouldConstruct(type) &&
type.defaultProps === undefined
);
}
进入 updateSimpleMemoComponent
// 在这里传进来的 Component 已经不是我们的 memo component了
// 而是这个Component里面的type
function updateSimpleMemoComponent(
current: Fiber | null,
workInProgress: Fiber,
Component: any,
nextProps: any,
updateExpirationTime,
renderExpirationTime: ExpirationTime,
): null | Fiber {
// 首先是一个常规的判断 current是否等于null 以及它的 updateExpirationTime 相关的一些判断
if (current !== null && updateExpirationTime < renderExpirationTime) {
// 拿到 prevProps，就是之前的props
const prevProps = current.memoizedProps;
// nextProps 就是现在 fiber 对象上的 pendingProps
// 判断两个 props 是否相等，以及两个 ref 是否相等
if (
shallowEqual(prevProps, nextProps) &&
current.ref === workInProgress.ref
) {
// 跳过组件的更新
return bailoutOnAlreadyFinishedWork(
current,
workInProgress,
renderExpirationTime,
);
}
}
// 需要更新
// 我们增加了memo这个特性，只是说我们可以通过一些简单的判断，跳过组件的更新
// 对于纯 function component，每次都需要去执行这个 function component 里面的逻辑的
// 可能会造成一些性能上面的开销的问题
return updateFunctionComponent(
current,
workInProgress,
Component,
nextProps,
renderExpirationTime,
);
}
我们通过React.memo这个方法创建的组件，它的所有props是直接作用于传入的 function component的
为什么在这里它不使用 reconcileChildFibers 方法呢？
因为 reconcileChildFibers，它会把props作为我自己当前这个组件
简单总结
Component.type