我的编程空间,编程开发者的网络收藏夹
学习永远不晚

React怎么更新流程驱动

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

React怎么更新流程驱动

这篇文章主要介绍了React怎么更新流程驱动的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React怎么更新流程驱动文章都会有所收获,下面我们一起来看看吧。

一、react.createElement和ReactElement元素

首先我们书写的函数式组件、类组件、jsx等代码全部会被babel-react编译成react.createElement()的调用或者jsx()调用(取决于react版本)。

举个栗子:

<div>    <ul>    <li key='1'>1</li>    <li key='2'>2</li>    <li key='3'>3</li>    </ul></div>

转换成

React.createElement('div',null,React.createElement('ul',null,React.createElement(                'li',                {                  key: '1'                },                '1'),React.createElement(                'li',                {                 key: '2'                },                '2'),React.createElement(                'li',                {                        key: '3'                },                '3')));

接下来我们需要知道React.createElement内部到底做了什么?源码位置

内部的实现其实很简单,就是处理传入的type/config/children等参数,再返回一个新的对象。

  • 从config中分离出特殊属性 key 和 ref

  • 将普通属性以及children添加到props中

  • 最后返回一个对象,这个对象我们称之为ReactElement元素

ReactElement数据结构如下:

  const element = {    $$typeof: REACT_ELEMENT_TYPE,    type,    key,    ref,    props,  };
  • '$$typeof':ReactElement的标识

  • 'type':可能是'div' 'span'这样的字符串标签,也可以是个函数(函数式组件)、类(类组件)

  • 'key/ref/props': ReactElement的属性

所以上述栗子的调用结果是下面的树形结构:

{    type: 'div',    key: null,    ref: null,    props: {        children: {                    type: 'ul',                    key: null,                    ref: null,                    props: {                        children: [                                    {                                        type: 'li',                                        key: null,                                        ref: null,                                        props: {                                            children: '1'                                        }                                    },                                    {                                        type: 'li',                                        key: null,                                        ref: null,                                        props: {                                                children: '2'                                        }                                    },                                    {                                        type: 'li',                                        key: null,                                        ref: null,                                        props: {                                               children: '3'                                        }                                    }                                ]                    }        }    }}

到这里就已经完成第一个和第二个小目标

不过在这里要多提一下,上述的树形结构,在react15版本及以前就可以直接拿来diff以及生成页面,不过正如第一篇文章所说,这样会遇到很大的问题(任务过重js执行时间久,影响渲染)。

所以16之后做的事情,就是依据上述的树形结构进行重构,重构出来的fiber数据结构用于满足异步渲染之需

二、双缓存技术

上篇文章中已经介绍了fiber节点的数据结构,这里我们再介绍下fiberRoot以及rootFiber。 fiberRoot源码位置

FiberRoot数据结构:

class FiberRootNode {  current: FiberNode;  container: any | null;  finishedWork: FiberNode | null;  pendingLanes: Lanes;  finishedLane: Lane;  pendingPassiveEffects: PendingPassiveEffects;  constructor(container: any | null, hostRootFiber: FiberNode) {    this.current = hostRootFiber;    this.container = container;    hostRootFiber.stateNode = this;    this.finishedWork = null;    this.pendingLanes = NoLanes;    this.finishedLane = NoLane;    this.pendingPassiveEffects = {      unmount: [],      update: []    };  }}

其中很多属性我们暂时无视,后续涉及到的时候会详细讲解,这里重点关注节点的关系。 rootFiber的数据结构和普通的FiberNode节点区别不大,这里不再赘述~

整个React应用有且只有一个fiberRoot

整个应用中同时存在两棵rootFiber树

当前页面对应的称为currentFiber,另外一颗在内存中构建的称为workInProgressFiber,它们通过alternate属性连接。

fiberRoot中的current指针指向了currentFiber树。

当整个应用更新完成,fiberRoot会修改current指针指向内存中构建好的workInProgressFiber。

图形描述如下:

React怎么更新流程驱动

三、React初始化的执行函数

在mount阶段的时候,应用是需要一个执行函数的,而这个函数就是(源码位置)

    react.createRoot(root).render(<App/>)
  • root: 模版文件中的id为root的div

  • <App>: 整个应用的根组件

源码简化后的代码如下:

    const createRoot = (container: Container) => {            const root = createContainer(container);            return {                render(element: ReactElementType) {                        return updateContainer(element, root);                }            };    };

createRoot会返回一个对象,其中包含了render函数,我们具体看看createContainer做了哪些事情。

const createContainer = (container: Container) => {    // 创建rootFiber    const hostRootFiber = new FiberNode(HostRoot, {}, null);    // 创建fiberRoot    const root = new FiberRootNode(container, hostRootFiber);    hostRootFiber.updateQueue = createUpdateQueue();    return root;};

react.createRoot()在内部会去创建整个应用唯一的fiberRoot和rootFiber,并进行关联。(如上述图形结构)

render内部执行的是updateContainer(),我们查看下内部实现:

const updateContainer = (element: ReactElementType,root: FiberRootNode) => {// mount时const hostRootFiber = root.current;// 添加update任务const lane = requestUpdateLane();const update = createUpdate<ReactElementType | null>(element, lane);enqueueUpdate(hostRootFiber?.updateQueue as UpdateQueue<ReactElementType | null>,update);scheduleUpdateOnFiber(hostRootFiber, lane);return element;};

其中有很多地方我们此时无须关心,但是我们看到内部调用了scheduleUpdateOnFiber, 而这个就是更新流程(schedule(调度)->reconciler(协调)->commit (渲染))的入口。

而这个入口不仅仅在初始化执行函数中render调用会唤起,还有其他的方式:

  • 类组件中setState -> scheduleUpdateOnFiber()

  • 函数组件useState -> scheduleUpdateOnFiber()

关于“React怎么更新流程驱动”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“React怎么更新流程驱动”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

React怎么更新流程驱动

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

React怎么更新流程驱动

这篇文章主要介绍了React怎么更新流程驱动的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React怎么更新流程驱动文章都会有所收获,下面我们一起来看看吧。一、react.createElement和React
2023-07-06

渐进式源码解析React更新流程驱动

这篇文章主要为大家介绍了渐进式源码解析React更新流程驱动详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-05-16

ubuntu怎么更新驱动

本篇内容主要讲解“ubuntu怎么更新驱动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ubuntu怎么更新驱动”吧!1.使用快捷键【Ctrl+Alt+T】打开终端命令模式。2.输入以下命令添加
2023-07-04

windows驱动人生ahci驱动怎么更新

这篇文章主要介绍“windows驱动人生ahci驱动怎么更新”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“windows驱动人生ahci驱动怎么更新”文章能帮助大家解决问题。驱动人生ahci驱动更新
2023-07-01

win10显卡驱动怎么更新 win10显卡驱动更新步骤

  win10显卡驱动怎么更新?下文将为大家演示eBbgUwin10系统显卡驱动更新教程,Wi编程客栈ndows1http://www.cppcns.com0系统该如何更新显卡驱动呢?方法很简单,下面就一起来了解吧。1、打开计算机管理&m
2023-06-08

电脑驱动怎么更新

这篇文章主要讲解了“电脑驱动怎么更新”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“电脑驱动怎么更新”吧!驱动怎么更新:方法一: 1、最简单的方法是使用驱动人生。2、安装完毕后,我们打开软件,
2023-06-30

windows驱动总裁网卡驱动怎么更新

今天小编给大家分享一下windows驱动总裁网卡驱动怎么更新的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。驱动总裁网卡驱动更
2023-07-01

Win11怎么更新显卡驱动

要更新显卡驱动,可以按照以下步骤操作:1. 打开“设置”应用程序,可以通过点击“开始”菜单中的设置图标来打开。2. 在“设置”窗口中,点击左侧的“Windows 更新”选项。3. 在右侧的窗口中,点击“检查更新”按钮,让Windows 11
2023-09-01

Win11音频驱动怎么更新

要更新Win11音频驱动,可以按照以下步骤进行操作:1. 打开设备管理器。可以通过在任务栏搜索栏中输入"设备管理器"来打开。2. 在设备管理器中,展开“声音、视频和游戏控制器”类别。3. 找到你的音频设备,右键点击并选择“更新驱动程序”。4
2023-08-31

win10怎么更新显卡驱动

要更新Windows 10的显卡驱动,可以按照以下步骤进行操作:1. 打开开始菜单,点击“设置”图标。2. 在“设置”窗口中,点击“更新和安全”选项。3. 在“更新和安全”窗口中,选择“Windows 更新”。4. 在右侧的窗口中,点击“检
2023-09-01

Win7怎么更新声卡驱动

要更新Win7的声卡驱动,可以按照以下步骤进行操作:1. 打开计算机的开始菜单,点击“控制面板”。2. 在控制面板窗口中,找到并点击“设备管理器”。3. 在设备管理器中,展开“声音、视频和游戏控制器”选项。4. 找到你的声卡驱动,右键点击它
2023-08-25

windows华硕驱动怎么更新

这篇“windows华硕驱动怎么更新”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“windows华硕驱动怎么更新”文章吧。华
2023-06-30

win10无线网卡驱动怎么更新?windows10无线网卡驱动安装更新教程

win10无线网卡驱动更新教程大家可以来了解一下,下文将会演示win10无线网卡驱动安装更新步骤,如果网卡驱动有了新的版本,我们该如编程客栈何进编程客栈行更新呢?请参考下文吧。 1、打开计算机管理——设备管理器&md
2023-06-08

win7怎么更新显卡驱动

这篇文章主要介绍了win7怎么更新显卡驱动,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 1、右键点击计算机,选择下拉菜单下的属性按钮。如图所示:2、点击属性进入控制面板系统
2023-06-28

Ubuntu怎么更新显卡驱动

在Ubuntu系统中更新显卡驱动可以通过以下几种方式:使用附带的“附加驱动”工具:在“软件和更新”设置中,选择“附加驱动”选项卡,系统将列出可用的显卡驱动程序。您可以选择要安装或更新的驱动程序,然后点击“应用更改”按钮进行安装。使用PPA源
Ubuntu怎么更新显卡驱动
2024-03-11

windows驱动程序如何更新

本篇内容主要讲解“windows驱动程序如何更新”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“windows驱动程序如何更新”吧!驱动程序更新方法:一、公版驱动1、其实大部分的用户使用的都是公版
2023-06-30

在Windows中手动更新驱动程序

在Windows中手动更新驱动程序的步骤如下:1. 打开设备管理器。可以通过在开始菜单中搜索“设备管理器”来找到它。2. 在设备管理器中,找到需要更新驱动程序的设备。设备通常按类别组织,例如显示适配器、声音、视频和游戏控制器等。3. 右键点
2023-09-08

Win7声卡驱动怎么更新?Win7升级声卡驱动

Win7客户反馈打开计算机后没有声音,导致使用体验不佳。可能是声卡驱动丢失或损坏,只需更新声卡驱动即可解决这个问题。然而,许多客户对声卡驱动的更新操作并不了解,因此小编将为大家提供一个实例教程。升级声卡驱动的方式:1、右键“此电脑”,随后点
2023-07-14

windows7驱动下载更新怎么操作

小编给大家分享一下windows7驱动下载更新怎么操作,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1、360驱动大师更新,通过使用专业的驱动工具直接进行在线索检
2023-06-26

教你win7网卡驱动怎么更新

如果使用的网卡驱动版本过低,使用wifi的时候会容易出现开启失败或者网络不稳定等情况,这个时候可以通过更新网卡驱动解决。下面小编将向大家介绍如何更新win7网卡驱动。具体的步骤如下:1、桌面模式下鼠标右键单击计算机选择属性。2、属性界面点击
2023-07-10

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录