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

本文主要是介绍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 componentlet 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 和 renderExpirationTimelet 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 comparisonlet 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，就是之前的propsconst 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的一个过程

这篇关于React16源码: React中的updateMemoComponent的源码实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---