React16源码: React中的updateMemoComponent的源码实现

updateMemoComponent


1 )概述

  • 在react16.6之后,提供了一个新的API
  • 通过 React.memo 来创建一个具有类似于 pure component 特性的 function component
  • 现在主要关注其更新过程

2 )源码

定位到 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作为我自己当前这个组件

    • 也就是我们的 memo component,它的children去进行一个调和的一个过程
    • 最终得到的是我们在使用 memo component 包裹的那一部分的 props.child里面的东西
    • 但是事实上, 在memo组件里面,它的child是来自于 component.type
    • 也就是我们传入的那个 function component,还是它的child
  • 简单总结

    • 我们的 memo component 它拿到的props是作为 Component.type
    • 也就是我们传入的 function component,它的props来进行一个创建他的 childfiber 的一个内容
    • 所以 memo component 的更新方式跟其他的组件会有一定的不同,因为它本身没有任何的一个意义
    • 本身提供的功能只是用来对比新老props是否有变化
    • 所以他接收的其他的props,都是应该作为它的真正的组件也就是function component 的props来进行使用
    • 所以这里面,它通过两个不同的方式,在两个不同的阶段去创建他child的一个过程

你可能感兴趣的:(React,React,Native,react.js,前端,前端框架)