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的源码实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/629007

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo