React理念——Fiber架构的主要原理

React理念——Fiber架构的主要原理

  • React 理念
      • CPU 的瓶颈
      • IO 的瓶颈
  • Fiber的产生及原理
    • 如何构建副作用链表

React 理念

从官网看到React的理念:

React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。

可见,关键是实现快速响应。那么制约快速响应的因素是什么呢?

我们日常使用 App,浏览网页时,有两类场景会制约快速响应:

  • 当遇到大计算量的操作或者设备性能不足使页面掉帧,导致卡顿。

  • 发送网络请求后,由于需要等待数据返回才能进一步操作导致不能快速响应。

这两类场景可以概括为:

  • CPU 的瓶颈

  • IO 的瓶颈(网络延迟)

CPU 的瓶颈

当项目变得庞大、组件数量繁多时,就容易遇到 CPU 的瓶颈。

主流浏览器刷新频率为 60Hz,即每(1000ms / 60Hz)16.6ms 浏览器刷新一次。

我们知道,JS 可以操作 DOM,GUI渲染线程与JS线程是互斥的。所以JS 脚本执行和浏览器布局、绘制不能同时执行。

在每 16.6ms 时间内,需要完成如下工作:

JS脚本执行 ----- 样式布局 ----- 样式绘制

JS 执行时间过长,超出了 16.6ms,这次刷新就没有时间执行样式布局和样式绘制了。从而引起页面掉帧,造成卡顿。

如何解决这个问题呢?

答案是:在浏览器每一帧的时间中,预留一些时间给 JS 线程,React利用这部分时间更新组件(可以看到,在源码中,预留的初始时间是 5ms)。这样浏览器就有剩余时间执行样式布局样式绘制,减少掉帧的可能性。

当预留的时间不够用时,React将线程控制权交还给浏览器使其有时间渲染 UI,React则等待下一帧时间到来继续被中断的工作。

这种将长任务分拆到每一帧中,像蚂蚁搬家一样一次执行一小段任务的操作,被称为时间切片(time slice)

解决CPU瓶颈的关键是实现时间切片,而时间切片的关键是:将同步的更新变为可中断的异步更新。

IO 的瓶颈

网络延迟是前端开发者无法解决的。只能在网络延迟客观存在的情况下,减少用户对网络延迟的感知

Fiber的产生及原理

React Fiber 是 React 16 中引入的一种新的协调机制(协程和双缓冲技术),用于实现增量式可中断可恢复异步更新方式,以提高 React 应用的性能和用户体验。

在传统的 React (React15及以前)渲染过程中,当进行组件的更新时,React 会从组件树的根节点开始递归遍历,计算出整个应用的新状态,并生成新的虚拟 DOM 树,最后将新旧虚拟 DOM 树进行对比,找出差异并进行更新。这个过程是同步的,一旦开始就无法中断,直到完成整个更新过程。如果组件树的层级很深,递归会占用线程很多时间,造成卡顿。

而 Fiber 的目标是将渲染过程拆分为多个可中断的小任务(fiber),并使用优先级调度算法决定任务的执行顺序,使得浏览器在空闲时间内可以执行其他任务或响应用户交互。这种增量式的更新方式使得 React 应用更加响应快速,避免了长时间的阻塞。
在渲染过程中根据优先级和时间片(Time Slicing)等策略,将任务分配到不同的时间片段中执行,而不是一次性将整个渲染过程执行完毕。

具体实现上,React Fiber 使用了一个双缓存技术。在任务执行过程中,React 会构建 Fiber 树,并使用两个链表结构分别表示当前任务的工作单元和下一次任务的工作单元。当时间片用尽或遇到优先级更高的任务时,React 可以中断当前任务,并将它保存到下一次任务的链表中。然后,React 可以恢复执行下一个任务,以此类推。

下面是 React Fiber 的主要原理和流程:

  1. 构建 Fiber 树:
    React 在渲染过程中构建一棵 Fiber 树,它与组件树一一对应。每个 Fiber 节点包含了组件实例、组件的状态、要渲染的元素、子节点等信息。

  2. 协调阶段:
    在协调阶段,React 遍历 Fiber 树,根据组件的更新优先级和调度算法,决定哪些 Fiber 节点需要进行更新,哪些可以跳过。这个过程是可中断的。

  3. 构建副作用链表:
    在协调阶段完成后,React 根据更新的结果构建一个副作用链表。副作用是对 DOM 的变更操作,如插入、更新或删除元素。副作用链表记录了所有需要在实际 DOM 更新阶段执行的操作。

  4. 提交阶段:
    在提交阶段,React 会遍历副作用链表,根据副作用的类型和位置,执行实际的 DOM 更新操作。这个过程是同步的,不能中断

  5. 渲染结果:
    在完成提交阶段后,React 会将更新后的结果渲染到屏幕上,并触发相应的生命周期方法和钩子函数。

React Fiber 的引入使得 React 应用的更新过程变得更加灵活和高效,能够更好地适应不同的设备和交互场景。同时,它也为 React 引入了更多的优化策略和扩展能力,如异步渲染、错误边界、懒加载等功能。


如何构建副作用链表

下面是构建副作用链表的主要过程:

  1. 初始化副作用链表:
    在协调阶段结束后,React Fiber 会初始化一个空的副作用链表,用于记录更新过程中的副作用操作。

  2. 遍历 Fiber 树:
    React Fiber 遍历 Fiber 树的过程中,对于每个需要更新的 Fiber 节点,会进行以下操作:

    • 检查更新类型: React Fiber 根据节点的更新类型(如插入、更新或删除)来确定是否有副作用产生。根据更新类型的不同,会进行相应的副作用记录。

    • 记录副作用: 如果节点有副作用产生,React Fiber 会将相关的操作记录到副作用链表中。这些操作可能包括对 DOM 的插入、更新或删除等。

    • 遍历子节点: React Fiber 会继续遍历当前节点的子节点,重复上述步骤,直到遍历完整个 Fiber 树。

  3. 形成链表结构: 在遍历过程中,每个具有副作用的操作都会被记录到副作用链表中。这些操作会按照执行顺序依次连接形成一个链表结构。

  4. 返回副作用链表: 当遍历完成后,React Fiber 将最终形成的副作用链表返回,以便在提交阶段中执行实际的 DOM 更新操作。

通过构建副作用链表,React Fiber可以将更新操作的执行顺序记录下来,而不需要立即执行这些操作。这样做的好处是可以对副作用进行批量处理,优化性能,并且在提交阶段时可以根据需要进行优化,如合并多个操作、减少DOM 访问次数等。这种机制帮助提高了 React 应用的渲染性能和用户体验。

参考:React技术揭秘

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

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

相关文章

对LitJson开源插件的自定义尝试

简介 LitJson是一款知名的Json字符串数据转换的插件,基于.Net开发,使用C#作为开发语言。本文旨在基于所学的编程知识以及对LitJson源码的理解来尝试对LitJson插件进行自定义。 自定义思路 (一)问题 结合我在使用LitJson过程中遇到…

Selenium基础

1. selenium简介 用于实现自动化测试的 python 包,使用前需要安装对应浏览器驱动 from time import sleep from selenium import webdriver option webdriver.ChromeOptions() # 指定chrome存储路径的二进制形式 option.binary_locationD:\Chrome\Google\Chrome\Ap…

企业计算机服务器中了halo勒索病毒怎么办,halo勒索病毒解密工具流程

随着网络技术的不断应用与发展,越来越多的企业开始利用网络开展各项工作业务,网络为企业的发展与生产生活提供了极大便利。但网络中的勒索病毒攻击企业服务器的事件频发,给企业的数据安全带来了严重威胁,数据安全问题一直是企业关…

pytorch CV入门 - 汇总

初次编辑:2024/2/14;最后编辑:2024/3/9 参考网站-微软教程:https://learn.microsoft.com/en-us/training/modules/intro-computer-vision-pytorch 更多的内容可以参考本作者其他专栏: Pytorch基础:https…

ArrayList 源码解析和设计思路

ArrayList 一、继承体系二、接口继承三、标记接口四、设计目的五、框架总体结构六、工作原理七、创建List对象初始化?还是add()添加元素初始化?七、add(E e)添加元素八、remove(int index)删除元素八、线程安全问题 一、继承体系 ArrayLis…

智慧城市革命,物联网技术如何改变城市治理与生活方式

随着科技的不断进步,智慧城市已经成为现代城市发展的重要方向之一。物联网技术作为智慧城市的重要支撑,正深刻改变着城市的治理模式和居民的生活方式。本文将探讨智慧城市革命,以及物联网技术如何改变城市治理与生活方式,同时介绍…

Python Web开发记录 Day12:Django part6 用户登录

名人说:东边日出西边雨,道是无晴却有晴。——刘禹锡《竹枝词》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 1、登录界面2、用户名密码校验3、cookie与session配置①cookie与session②配置…

STM32CubeMX与HAL库开发教程八(串口应用/轮询/中断/DMA/不定长数据收发)

目录 前言 初识串口-轮询模式 串口中断模式收发 串口DMA模式 蓝牙模块与数据包解析 前言 前面我们简单介绍过串口的原理和初步的使用方式,例如怎么配置和简单的收发,同时我们对串口有了一个初步的了解,这里我们来深入的来使用一下串口 …

Linux服务器(RedHat、CentOS系)安全相关巡检shell脚本

提示:巡检脚本可以使用crontab定时执行,人工根据执行结束时间点统一收集报告文件即可。 #!/bin/bash# Define output file current_date$(date "%Y%m%d") # Gets the current date in YYYYMMDD format echo >server_security_inspection_r…

Leetcode 第 126 场双周赛 Problem C 替换字符串中的问号使分数最小(Java + 排序 + 贪心)

文章目录 题目思路Java 排序 贪心第一步:第二步:第三步: 复杂度Code 题目 Problem: 100249. 替换字符串中的问号使分数最小给你一个字符串 s 。s[i] 要么是小写英文字母,要么是问号 ‘?’ 。对于长度为 m 且 只 含有小写英文字…

任职资格中的一些面试题和知识点

目录 一、计算机数据结构基本概念理解:1. 数组基本概念优缺点以及如何改进常用的操作底层实现还有哪些容易问到的问题:关于数组的一些衍生数据结构和算法问题 2. 链表基本概念:链表的节点是什么?每个节点包含哪些信息?…

【计算机网络】https的工作原理以及和http的区别

目录 前言 1. HTTP协议存在的问题 2. 什么是HTTPS协议? 3. HTTP和HTTPS有哪些区别? 4. HTTPS的工作原理 加密方式 前言 在日常的Web项目练习中,我们会发现老师会让我们在打开服务器之后使用 http://localhost/...进行项目效果测试和预览…

2.26OS分类,中断(内,外),系统调用,操作系统结构、引导,虚拟机(两类VMM),进程

外核可以申请分配连续的磁盘块以支持频繁的随机访问,其它的方式是采用虚拟存储 分层结构

MongoDB yum安装教程

1 配置yum源 cat /etc/yum.repos.d/mongodb-org-6.0.repo ##################################################### [mongodb-org-6.0] nameMongoDB Repository baseurlhttps://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/6.0/x86_64/ gpgcheck1 enabled1 gpgkeyht…

iPhone 的健康数据采用的是 FHIR 传输格式

虽然感觉 FHIR 的数据传输格式还是有点繁琐的,但貌似现在也是唯一的事实上的标准。 通过 iPhone 健康上面查看的数据来看,有关健康的数据还是使用 FHIR 的数据传输格式。 不管怎么样,针对老旧的数据传输格式来看,FHIR 至少目前还是…

实现HBase表和RDB表的转化(附Java源码资源)

实现HBase表和RDB表的转化 一、引入 转化为HBase表的三大来源:RDB Table、Client API、Files 如何构造通用性的代码模板实现向HBase表的转换,是一个值得考虑的问题。这篇文章着重讲解RDB表向HBase表的转换。 首先,我们需要分别构造rdb和hba…

学习开发小程序的起航日记

2024年3月16日 不知不觉中三月份还只剩了一半的光景,我想写的内容还很多没有写,或者更应该说,是想积累的还有很多。现在最应该去完善Java的内容,可还是想先等等。想等搞清楚小程序部分,想等积累完小程序的内容。 这几…

PBOOTCMS在nginx虚拟主机location配置中添加规则

PBOOTCMS在nginx虚拟主机location配置中添加规则,规则如下: 1、X版本使用如下规则: location / { if (!-e $request_filename){ rewrite ^/(.*)$ /index.php/$1 last; } } 2、X版本使用如下规则: location / { if (!-e $reques…

Golang 泛型定义类型的时候前面 ~ 代表什么意思

先看代码,定义一个简单的泛型 c1 里面一个 int ,定义一个函数goods 下面 main函数进行调用, 如果直接传int 类型是不会报错的,但是如果传自定义类型的b就会报错。 type c1 interface {int }func goods[T c1](a T) {fmt.Println(a) }type myint intfunc …

网络安全——关于防火墙

网络安全防火墙是很重要的部分,关于防火墙我们要知道,他默认所有流量都是黑名单,只有开启允许通过才可以。 我们通过一个实验来学防火墙命令。 防火墙要登录才能使用,用户名是admin,默认密码是Admin123,在第一次登录…