认识

2023年12月28日

柏拉文

越努力，越幸运

一、认识

---

React.memo 可以理解为包了一层的高阶组件，它的阻断更新机制，是通过控制下一级 children ，也就是 memo 包装的组件，是否继续调和渲染，来达到目的的

被React.memo包裹的组件,element 会被打成 REACT_MEMO_TYPE 类型的 element 标签，在 element 变成 fiber 的时候， fiber 会被标记成 MemoComponent 的类型。

react/src/ReactMemo.js

function memo(type,compare){
  const elementType = {
    $$typeof: REACT_MEMO_TYPE, 
    type,  // 我们的组件
    compare: compare === undefined ? null : compare,  //第二个参数，一个函数用于判断prop，控制更新方向。
  };
  return elementType
}

react-reconciler/src/ReactFiber.js

case REACT_MEMO_TYPE:
fiberTag = MemoComponent;

那么对于 MemoComponent React 内部又是如何处理的呢？首先 React 对 MemoComponent 类型的 fiber 有单独的更新处理逻辑updateMemoComponent,如下所示:

react-reconciler/src/ReactFiberBeginWork.js

function updateMemoComponent(){
    if (updateExpirationTime < renderExpirationTime) {
         let compare = Component.compare;
         compare = compare !== null ? compare : shallowEqual //如果 memo 有第二个参数，则用二个参数判定，没有则浅比较props是否相等。
        if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
            return bailoutOnAlreadyFinishedWork(current,workInProgress,renderExpirationTime); //已经完成工作停止向下调和节点。
        }
    }
    // 返回将要更新组件,memo包装的组件对应的fiber，继续向下调和更新。
}