正则表达式总结

news2024/11/6 7:14:10

React15前的渲染方式

React15以前,React是用全量渲染的方式进行页面渲染,每次更新都需要整个页面重新渲染。全量当数据量大的时候,页面就会掉帧卡顿。

为什么需要React Fiber

为了解决上述React15带来的卡顿问题,我们不能让一个程序长期霸占着资源,可以将浏览器的渲染、布局、绘制、资源加载(例如HTML解析)、事件响应、脚本执行视作操作系统的’进程’,我们需要通过某些调度策略合理地分配CPU资源,从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。

React16后使用Fiber作为新的协调引擎(diff算法工作),主要目的是用于增量渲染,让协调(Reconcilation)过程能进行中断,适时让出CPU执行权,让位给高优先级的任务,浏览器空闲后再恢复渲染。

什么是Fiber

React Fiber本质是一个链表,其结构大致如下:

type Fiber = {...// 指向父节点return : Fiber | null,// 指向下一个节点child: Fiber | null,// 指向同级隔壁节点sibling: Fiber | null
} 

根据这个数据结构,我们可以以迭代的方式使用深度优先遍历来处理这些节点:

/**
 * @params fiber 当前需要处理的节点
 * @params topWork 本次更新的根节点
 */
function performUnitOfWork(fiber: Fiber, topWork: Fiber) {// 对该节点进行处理beginWork(fiber);// 如果存在子节点,那么下一个待处理的就是子节点if (fiber.child) {return fiber.child;}// 没有子节点了,上溯查找兄弟节点let temp = fiber;while (temp) {completeWork(temp);// 到顶层节点了, 退出if (temp === topWork) {break}// 找到,下一个要处理的就是兄弟节点if (temp.sibling) {return temp.sibling;}// 没有, 继续上溯temp = temp.return;}
} 

React Fiber通过使用requestIdleCallback类似的实现方式来控制的组件渲染的进度条requestIdleCallback属于宏任务,每隔16ms(一帧)会调用一次,它的回调可获取本次可执行的时间。使用方法:

const workLoop = (deadline) => {let shouldYield = falsewhile(!shouldYield) {console.log('working')shouldYield = deadline.timeRemaining() < 1}requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop) 

由于兼容性问题以及更新不及预期等问题 ,React实际使用的是requestIdleCallback的polyfill方法,(Safari不支持,其余浏览器需要较新版本)

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

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

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

相关文章

PG::PyExp

nmap -Pn -p- -T4 --min-rate1000 192.168.115.118 nmap -Pn -p 1337,3306 -sCV 192.168.115.118 1337端口是ssh服务&#xff0c;3306是数据库&#xff0c;没有web服务&#xff0c;只能尝试进行爆破。 由于不知道ssh用户名&#xff0c;所以尝试root用户爆破3306端口。 hydra …

昆仑万维或将引领国内 AIGC 技术发展

AIGC 发展历程 如果说 2021 年是元宇宙元年&#xff0c;那么 2022 年绝对可以称作 AIGC 元年。自从 Accomplice 于 2021 年 10 月推出 Disco Diffusion 以来&#xff0c;AIGC 受到了前所未有的关注&#xff0c;相关产品和技术更是以井喷之势快速更新迭代。 AIGC&#xff08;A…

C++ Reference: Standard C++ Library reference: Containers: map: map: rend

C官网参考链接&#xff1a;https://cplusplus.com/reference/map/map/rend/ 公有成员函数 <map> std::map::rend C98 reverse_iterator rend(); const_reverse_iterator rend() const; C11 reverse_iterator rend() noexcept; const_reverse_iterator rend() const noe…

Unity - 搬砖日志 - MatierlaPropertyDrawer 中的参数如何匹配 - 自定义 Attribute 的参数提取

环境 Unity : 2020.3.37f1 搬一下砖&#xff0c;并记录&#xff0c;免得后续重新搬砖 完成的测试shader Shader "Unlit/TestMyEnuMatAttributeShader" {Properties{_MainTex ("Texture", 2D) "white" {}[MyEnumMatAttribute] _TestProp (&quo…

前端CSS实现苹果官网文字渐入效果

效果 分析 文字是从左到有慢慢呈现出来&#xff0c;不是整体消失和出现&#xff0c;那么肯定不能使用透明度。 我们可以想到渐变文字&#xff0c;然后通过改变背景的位置来控制文字的显示与隐藏。 渐变文字 渐变文字该如何实现呢&#xff1f;这是实现这个效果的关键步骤。 其…

计算机毕设Python+Vue校园闲置物品管理系统的实现(程序+LW+部署)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

看了那么多SSM整合,这一篇真的很用心。

1.邂逅 SSM 前言 记得大二上学期老师第一次讲 SSM 整合的时候&#xff0c;自己竟然浑浑噩噩睡过去了。 平时上课不好好听讲&#xff0c;后来听说期末要交大作业了&#xff0c;只能被迫去网上自学。 不对。。。少打个S&#xff0c;不过这真的是我第一次搜 SSM 的资料&#xff0…

华新环保深交所上市:市值49亿 前9个月净利降幅近30%

雷递网 雷建平 12月16日华新绿源环保股份有限公司&#xff08;简称&#xff1a;“华新环保”&#xff0c;证券代码&#xff1a;301265&#xff09;今日在深交所上市。华新环保本次发行股票7575万股&#xff0c;发行价13.28元&#xff0c;募资10.06亿元。华新环保开盘价为16元&a…

爬虫应用场景的利弊分析

相信大家在春节的时候都有过抢火车票的经历&#xff0c;对一些抢票软件一定不会感到陌生。今天我们就来从技术的角度&#xff0c;来看看抢票软件背后的东西——爬虫。通俗点说&#xff0c;爬虫就是模拟人的行为去各个网站溜达&#xff0c;并把看到的信息背回来的探测机器。如今…

Swagger是什么?Swagger怎么用?

Swagger 是一个规范且完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 Swagger 的目标是对 REST API 定义一个标准且和语言无关的接口&#xff0c;可以让人和计算机拥有无须访问源码、文档或网络流量监测就可以发现和理解服务的能力。当通过 S…

(直连主题扇形)交换机

目录 一、交换机简介 1. Exchange&#xff08;交换机&#xff09;的作用 2.Exchange&#xff08;交换机&#xff09;的类型 ①.直连交换机&#xff1a;Direct Exchange ② 主题交换机&#xff1a;Topic Exchange ③ 扇形交换机&#xff1a;Fanout Exchange ④ 首部交换机…

NMS与Soft NMS算法解析与numpy实现

1. NMS算法 1.1 什么是NMS算法 NMS全称为Non Maximum Suppression&#xff0c;中文意思是非极大值抑制&#xff0c;字面意思就是不是极大值的元素被抑制掉&#xff0c;其实就是筛选出局部最大值得到最优解。NMS算法被广泛运用于目标检测算法处理网络输出的边界框。 1.2 为什…

【HTML基础篇002】HTML之form表单超详解

文章目录 &#x1f304;一、form表单是什么 &#x1f304;二、form表单的属性 &#x1f304;三、input中的各种Type属性值 &#x1f304;四、标签 &#x1f304;一、form表单是什么 表单是一个包含表单元素的区域。表单用于向服务器传输数据&#xff0c;从而实现用户与Web服…

jsp+ssm计算机毕业设计潮流服饰网店平台【附源码】

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; JSPSSM mybatis Maven等等组成&#xff0c;B/S模式 Mave…

第十四届蓝桥杯集训——if——配套用法示例

第十四届蓝桥杯集训——if——配套用法示例 目录 第十四届蓝桥杯集训——if——配套用法示例 方法1 方法2 其它指数幂 输入一个数n&#xff0c;判断n是否是2的指数。 n的取值范围(0>n<)​​​​ 题目看着很简单&#xff0c;其实在比较小的数上还是挺容易做的&…

CARIS11.4基本使用流程及其bug解决

今天博主介绍一下CARIS11.4的基本流程以及它的界面bug。 一、CARIS11.4的基本流程 如果以前用过CARIS9&#xff0c;不用看帮助说明&#xff0c;你摸索一段时间也能掌握CARIS11.4的使用流程。相比CARIS9&#xff0c;CARIS11.4的主要功能基本不变&#xff0c;增加了生成变分辨率…

毕业设计 - java web 进销存管理系统的设计与实现【源码+论文】

文章目录前言一、项目设计1. 模块设计系统需要具备以下功能2. 实现效果二、部分源码项目源码前言 今天学长向大家分享一个 java web 项目: 进销存管理系统的设计与实现 一、项目设计 1. 模块设计 系统需要具备以下功能 ⑴一般企业人员的计算机知识掌握的不多&#xff0c;因…

Android studio profiler中的Shallow size和retained sizes是什么意思

这个文章说得非常好&#xff1a;https://www.yourkit.com/docs/java/help/sizes.jsp#:~:textYourKit%20Java%20Profiler%20is%20capable%20of%20measuring%20shallow,the%20number%20and%20types%20of%20%20its%20fields. Shallow size&#xff1a;用于存储一个对象的内存大小…

【Python机器学习】聚类算法任务,评价指标SC、DBI、ZQ等系数详解和实战演示(附源码 图文解释)

需要源码和数据集请点赞关注收藏后评论区留言私信~~~ 一、聚类任务 设样本集S{x_1,x_2,…,x_m}包含m个未标记样本&#xff0c;样本x_i(x_i^(1),x_i^(2),…,x_i^(n))是一个n维特征向量。 聚类在分簇过程的任务是建立簇结构&#xff0c;即要将S划分为k&#xff08;有的聚类算法…

你不知道的 Git 技巧:如何实现核心代码保护

大家好&#xff0c;我是 shixin。 前段时间完成了一个核心代码保护的功能&#xff0c;目标是在关键代码被修改及时同步给其他人&#xff0c;避免没经过 review 就上线导致问题&#xff0c;提示的效果图如下&#xff1a; 在实现的过程中&#xff0c;用到一些平时使用不多的 Git…