当前位置: 首页 > news >正文

对React-Fiber的理解,它解决了什么问题?

对React-Fiber的理解,它解决了什么问题?

  • Fiber用来解决什么问题?
  • Fiber是什么?
  • Fiber是如何解决问题的?


Fiber用来解决什么问题?

JavaScript引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待
如果 JavaScript 线程长时间地占用了主线程,那么渲染层面的更新就不得不长时间地等待,界面长时间不更新,会导致页面响应度变差,用户可能会感觉到卡顿
而这也正是 React 15 的 Stack Reconciler所面临的问题,当 React在渲染组件时,从开始到渲染完成整个过程是一气呵成的,无法中断
如果组件较大,那么js线程会一直执行,然后等到整棵VDOM树计算完成后,才会交给渲染的线程
这就会导致一些用户交互、动画等任务无法立即得到处理,导致卡顿的情况

Fiber是什么?

在react中,主要做了以下的操作:

  • 为每个增加了优先级,优先级高的任务可以中断低优先级的任务。然后再重新,注意是重新执行优先级低的任务
  • 增加了异步任务,调用requestIdleCallback api,浏览器空闲的时候执行
  • dom diff树变成了链表,一个dom对应两个fiber(一个链表),对应两个队列,这都是为找到被中断的任务,重新执行

Fiber是如何解决问题的?

Fiber把渲染更新过程拆分成多个子任务,每次只做一小部分,做完看是否还有剩余时间,如果有继续下一个任务;如果没有,挂起当前任务,将时间控制权交给主线程,等主线程不忙的时候在继续执行

即可以中断与恢复,恢复后也可以复用之前的中间状态,并给不同的任务赋予不同的优先级,其中每个任务更新单元为 React Element 对应的 Fiber节点

http://www.lryc.cn/news/8523.html

相关文章:

  • 【Linux】初学Linux你需要掌握这些基本指令(二)
  • Linux中VI/VIM 编辑器
  • PDF怎么转换成Word?两种PDF免费转Word方法推荐
  • 极兔一面:Dockerfile如何优化?注意:千万不要只说减少层数
  • SpringBoot+Vue实现酒店客房管理系统
  • 自适应多因素认证:构建不可破解的企业安全防线|身份云研究院
  • 阶段二8_集合ArrayList_学生管理系统_详细步骤
  • 一篇解决Linux 中的负载高低和 CPU 开销并不完全对应
  • 关于IDM下载器,提示:一个假冒的序列号被用来注册……idea项目文件路径报红
  • JVM - 高效并发
  • 中小学智慧校园电子班牌系统源码 Saas云平台模式
  • 记录一次服务器被攻击的经历
  • Python解题 - CSDN周赛第29期 - 争抢糖豆
  • C代码中访问链接脚本中的符号
  • MySQL 8:MySQL索引
  • JVM详解
  • MySQL数据库调优————索引数据结构
  • visual studio 改变界面语言
  • 2023.2.16每日一题——1250. 检查「好数组」
  • 亿级高并发电商项目-- 实战篇 --万达商城项目 八(安装FastDFS、安装Nginx、文件服务模块、文件上传功能、商品功能与秒杀商品等功能)
  • Viper捐款7000万韩元,合计人民币是多少钱?
  • 前端vue实现系统拦截跳转外链并进入跳转询问界面
  • 【Linux】Shell(Bash)单引号、双引号、不加引号和反引号用法和区别详解
  • 本人使用的idea插件
  • 站在行业C位,谷医堂打开健康管理服务新思路
  • ABO溶血症概率
  • 【算法数据结构体系篇class03】:数组、链表、栈、队列、递归时间复杂度、哈希表、有序表问题
  • 【新2023】华为OD机试 - 最多提取子串数目(Python)
  • 嵌入式C语言设计模式 --- 代理模式
  • 前端性能优化的整理笔记