React18原理: 核心包结构与两大工作循环

React核心包结构


1 ) react

  • react基础包,只提供定义 react组件(ReactElement)的必要函数
  • 一般来说需要和渲染器(react-dom,react-native)一同使用
  • 在编写react应用的代码时, 大部分都是调用此包的api
  • 比如, 我们定义组件的时候,就是它提供的
    class Demo extends React.Component {render() {return <h1>Hello</h1>}
    }
    

2 ) react-dom

  • react渲染器之一,是react与web平台连接的桥梁(可以在浏览器和nodejs环境中使用)
  • 因为react它不仅可以在浏览器中进行渲染,比如说react-native,它可以去渲染移动端的一些内容
  • react-dom 是在浏览器的环境中提供的渲染器
  • react-dom 的作用
    • 将 react-reconciler 中的运行结果输出到web界面上
  • 在编写react应用的代码时,大多数场景下,能用到此包的就是一个入口函数
    • ReactDOM.render(<App/>, document.getElementById('root')
  • 其余使用的api, 基本是react包提供的

3 ) react-reconciler

  • react得以运行的核心包(综合协调react-dom,react,schedu1er各包之间的调用与配合)
  • 管理react应用状态的输入和结果的输出
  • 将输入信号最终转换成输出信号传递给渲染器
    • 接受输入(scheduleUpdateOnFiber), 将fiber树生成逻辑封装到一个回调函数中(涉及fiber树形结构,fiber.updateQueue列,调和算法等)
    • 把此回调函数(performSyncWorkOnRoot或performConcurrentWorkOnRoot)送入scheduler进行调度
    • scheduler会控制回调函数执行的时机,回调函数执行完成后得到全新的fiber树
  • 再调用渲染器(如react-dom,react-native等)将fiber树形结构最终反映到界面上
  • 总结而言,react-reconciler 这个包它的核心是生成任务,这个生成任务是基于fiber的

4 ) scheduler

  • scheduler时调度器, 实际上它的核心就是react的fiber架构下的时间分片
  • 最核心的作用,就是对这个时间分片上面的一个管理,如何去执行我们的这个分片的任务
  • 调度机制的核心实现,控制由react-reconciler送入的回调函数的执行时机
  • 在 ConCurrent 模式下可以实现任务分片
  • 在编写react应用的代码时,几乎不会直接用到此包提供的api.
  • 核心任务就是执行回调(回调函数由react-reconciler提供)
  • 通过控制回调函数的执行时机,来达到任务分片的目的,实现可中断渲染(ConCurrent模式下才有此特性)
  • 所以,scheduler 它是决定执行什么任务,什么任务先执行,而 生成任务和执行任务都是 react-reconciler 来做的

React工作循环

  • react中的工作循环,这是它的一个最顶层的一个流程图,在这张图里面,有两个核心的大循环
  • 第一大循环是 react-reconciler 提供的,它的核心是构建fiber树,生成任务
  • 第二大循环是 scheduler 提供的, 它的核心是任务调度(处理任务的优先级)
  • react的原理实际上就是两大工作循环

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/680987.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[VulnHub靶机渗透] Nyx

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

2月3日作业

1.编程实现单向循环链表的头插&#xff0c;头删、尾插、尾删 尾插/头插&#xff0c;头删&#xff0c;尾删&#xff1a; 头文件&#xff1a; #ifndef __HEAD_H_ #define __HEAD_H_#include<stdio.h> #include<string.h> #include<stdlib.h>enum {FALSE-1,SU…

Spring Cloud Gateway 网关路由

一、路由断言 路由断言就是判断路由转发的规则 二、路由过滤器 1. 路由过滤器可以实现对网关请求的处理&#xff0c;可以使用 Gateway 提供的&#xff0c;也可以自定义过滤器 2. 路由过滤器 GatewayFilter&#xff08;默认不生效&#xff0c;只有配置到路由后才会生效&#x…

浅谈进制的转换

本文创作灵感来自CSDN咸鱼WCY 的 咸鱼小白学嵌入式之C语言&#xff08;2.进制&#xff09; 博主更完就没更了&#xff0c;决定书接上回&#xff08;喜 进制是个啥 要理解进制&#xff0c;首先哈&#xff0c;咱得知道不同进制的含义 说到底&#xff0c;各个进制其实有点像在…

学生公寓|基于Springboot的学生公寓管理系统设计与实现(源码+数据库+文档)

学生公寓管理系统目录 目录 基于Springboot的学生公寓管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、宿舍列表 2、宿舍公告信息管理 3、宿舍公告类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八…

洛谷: [CSP-J2019] 公交换乘

题目描述 著名旅游城市 B 市为了鼓励大家采用公共交通方式出行&#xff0c;推出了一种地铁换乘公交车的优惠方案&#xff1a; 在搭乘一次地铁后可以获得一张优惠票&#xff0c;有效期为 45 分钟&#xff0c;在有效期内可以消耗这张优惠票&#xff0c;免费搭乘一次票价不超过地…

学生成绩管理系统|基于Springboot的学生成绩管理系统设计与实现(源码+数据库+文档)

学生成绩管理系统目录 目录 基于Springboot的学生成绩管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能模块 2、学生功能模块 3、教师功能模块 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源…

AI引领低代码革命:未来应用开发的新主流

距离ChatGPT发布已经过去快一年时间。 在这一年里&#xff0c;以ChatGPT为代表的自然语言处理领域的重大进步&#xff0c;为我们的对话系统和语言交流提供了更加智能和自然的体验。随着ChatGPT的应用不断扩大&#xff0c;人们开始认识到人工智能&#xff08;AI&#xff09;技术…

elasticsearch增删改查

一、数据类型 1、字符串类型 &#xff08;1&#xff09;text &#xff08;2&#xff09;keyword 2、数值类型 &#xff08;1&#xff09;long、integer、short、byte、float、double 3、日期类型 &#xff08;1&#xff09;date 4、布尔类型 &#xff08;1&#xff0…

【AI绘图】初见·小白入门stable diffusion的初体验

首先&#xff0c;感谢赛博菩萨秋葉aaaki的整合包 上手 stable diffusion还是挺好上手的&#xff08;如果使用整合包的话&#xff09;&#xff0c;看看界面功能介绍简单写几个prompt就能生成图片了。 尝试 我在网上找了一张赛博朋克边缘行者Lucy的cos图&#xff0c;可能会侵…

假期作业 2月8日

数据类型与作用域练习 1、选择题 1.1、以下选项中,不能作为合法常量的是 __________ A&#xff09;1.234e04 B&#xff09;1.234e0.4 C&#xff09;1.234e4 D&#xff09;1.234e0 1.2、以下定义变量并初始化错误的是_____________。 A) char c1 ‘H’ &#xff…

开发自定义标记应用程序

开发自定义标记应用程序 问题陈述 Larry Williams 是ABC Inc.公司的CEO,他希望公司能够拥有一个交互式网站以向访问网站的用户表示问候并显示当前时间。他还希望最终用户能够指定主页的背景颜色。您是公司的网站管理员。Larry要您修改网站的主页,以便向最终用户显示自定义问…

Linux篇:网络基础1

一、网络基础&#xff1a;网络本质就是在获取和传输数据&#xff0c;而系统的本质是在加工和处理数据。 1、应用问题&#xff1a; ①如何处理发来的数据&#xff1f;—https/http/ftp/smtp ②长距离传输的数据丢失的问题&#xff1f;——TCP协议 ③如何定位的主机的问题&#…

Redis集中管理Session和系统初始化参数详解

Redis 是一个开源的、基于内存的键值存储系统&#xff0c;通常用作数据库、缓存或消息传递系统。在 Web 应用程序中&#xff0c;Redis 常用于集中管理 Session 数据和系统初始化参数。 Redis 管理 Session Session 是 Web 应用程序中用于保持用户状态的一种机制…

鸿蒙小案例-你画我猜

鸿蒙小案例-你画我猜 1.准备组件(组件布局) 2.实现跟随鼠标画笔画出图案功能 3.实现复制上面的画笔的图案功能 4.其他小功能1.组件的准备 画布的组件官方给的API是Canvas&#xff0c;需要传递一个参数CanvasRenderingContext2D 直接搜索API 使用官方案例 private settings: …

L2-1 点赞狂魔——pta(题解)

微博上有个“点赞”功能&#xff0c;你可以为你喜欢的博文点个赞表示支持。每篇博文都有一些刻画其特性的标签&#xff0c;而你点赞的博文的类型&#xff0c;也间接刻画了你的特性。然而有这么一种人&#xff0c;他们会通过给自己看到的一切内容点赞来狂刷存在感&#xff0c;这…

【蓝桥杯Python】试题 算法训练 藏匿的刺客

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 强大的kAc建立了强大的帝国&#xff0c;但人民深受其学霸及23文化的压迫&#xff0c;于是勇敢的鹏决心反抗。   kAc帝国防守…

C语言——求 1+12+123+……前 n 项之和,其中n 是从键盘输入的一个数字(1~9)。

一、问题 求 112123……前 n 项之和&#xff0c;其中n 是从键盘输入的一个数字&#xff08;1~9&#xff09; 二、解答 #include <stdio.h>int main() {int n, i, term 0, sum 0;printf("请输入一个数字(1~9): ");scanf("%d", &n);if (n <…

书生谱语-基于 InternLM 和 LangChain 搭建知识库

大语言模型与外挂知识库&#xff08;RAG&#xff09;的优缺点 RAG方案构建与优化 作业 在创建web_demo时&#xff0c;需要根据教程将服务器端口映射到本地端口&#xff0c;另外需要将链接的demo从服务器中复制出来&#xff0c;不要直接从服务器打开demo页面&#xff0c;不然会…

分布式事务详解

概述 随着互联网的发展&#xff0c;软件系统由原来的单体应用转变为分布式应用。分布式系统把一个单体应用拆分为可独立部署的多个服务&#xff0c;因此需要服务与服务之间远程协作才能完成事务操作。这种分布式系统下不同服务之间通过远程协作完成的事务称之为分布式事务&…