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

简介: JavaScript引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待

Fiber用来解决什么问题?

JavaScript引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待

如果 JavaScript 线程长时间地占用了主线程,那么渲染层面的更新就不得不长时间地等待,界面长时间不更新,会导致页面响应度变差,用户可能会感觉到卡顿

而这也正是 React 15 的 Stack Reconciler所面临的问题,当 React在渲染组件时,从开始到渲染完成整个过程是一气呵成的,无法中断

如果组件较大,那么js线程会一直执行,然后等到整棵VDOM树计算完成后,才会交给渲染的线程

这就会导致一些用户交互、动画等任务无法立即得到处理,导致卡顿的情况

Fiber是什么?

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

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

Fiber是如何解决问题的?

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


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

相关文章
|
6月前
|
前端开发 JavaScript 调度
【第32期】一文学会用React Fiber提升性能
【第32期】一文学会用React Fiber提升性能
108 0
|
15天前
|
前端开发 JavaScript 调度
React 的 fiber
【10月更文挑战第26天】React Fiber 是 React 框架中的一个重要创新,它为 React 应用的性能优化和用户体验提升提供了强大的支持,使得 React 在处理复杂的前端应用场景时更加高效和灵活。
|
3月前
|
前端开发 JavaScript 开发者
React是什么?
【8月更文挑战第28天】React是什么?
176 70
|
3月前
|
前端开发
React 19 CheatSheet
React 19 CheatSheet
|
3月前
|
缓存 前端开发 JavaScript
理解 React 的 Fiber 架构
【8月更文挑战第6天】 理解 React 的 Fiber 架构
179 1
|
4月前
|
前端开发 JavaScript
React
【7月更文挑战第13天】
30 4
|
前端开发 JavaScript 算法
react理解,什么是react,react有那些特性
react理解,什么是react,react有那些特性
68 0
|
Web App开发 XML 缓存
理解React中Fiber架构(一)
自从React16版本更新了Hook用法,同时引入了新的Fiber架构去重构整个渲染和事件处理过程,React团队引入Hook是为了更好剥离业务代码,让开发能更加友好的抽象代码,达到低耦合的函数组件目的,那么重构Diff算法,引入Fiber架构是为了什么呢? 其实只是为了能够一个目标快速响应,原先Diff算法时间复杂度为O(n3) O(n^3)O(n3) ,最后经过Fiber重构达到了O(n)O(n)O(n),这里面具体有什么门道,值得我们去深入研究一下。
265 0
|
缓存 JavaScript 前端开发
理解React中Fiber架构(二)
自从React16版本更新了Hook用法,同时引入了新的Fiber架构去重构整个渲染和事件处理过程,React团队引入Hook是为了更好剥离业务代码,让开发能更加友好的抽象代码,达到低耦合的函数组件目的,那么重构Diff算法,引入Fiber架构是为了什么呢? 其实只是为了能够一个目标快速响应,原先Diff算法时间复杂度为O(n3) O(n^3)O(n3) ,最后经过Fiber重构达到了O(n)O(n)O(n),这里面具体有什么门道,值得我们去深入研究一下。
466 0
|
存储 开发框架 前端开发
React_Fiber机制
背景介绍 从 {React 元素| React Element} 到 {Fiber 节点| Fiber Node} {副作用| Side-effects} Fiber 树的根节点 渲染算法
React_Fiber机制