深入了解React新引擎:React Fiber

简介:

Facebook正在以流行的JavaScript框架React为基础开发一个全新的架构。这个名为React Fiber的全新设计改变了检测变更的方法和时机,借此可改进浏览器端和其他渲染设备的响应速度。

这一全新架构最初已于2016年7月公开发布,其中蕴含着过去多年来Facebook不断改进的工作成果。该架构可向后兼容,彻底重写了React的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间,并将变更传递给渲染器。

实际上该团队在单线程JavaScript引擎的基础上构建了一种可划分优先级的协作式任务调度器。在最初的协调算法(现已更名为Stack Reconciler)中,Virtual DOM diff会一次性处理整个组件树:

重点在于,Stack Reconciler始终会一次性地同步处理整个组件树。Stack Reconciler无法暂停,因此如果更新较为深入并且可用CPU时间有限,这种做法并非最优化的。

与之相对的Fiber Reconciler则有着截然不同的目标:

能够将可中断的任务拆分成块。 能够对进程中的工作划分优先级、重新设定基址(Rebase)、恢复。 能够在父子之间来回反复,借此为React的Layout提供支持。 能够通过render()返回多个元素。 为错误边界提供了更好的支持。
简单来说,此时不在需要等待变更传播到整个组件树,React Fiber可以知道如何时不时暂停一下,检查是否有其他更重要的更新。这种调度能力主要基于requestIdleCallback的使用,而这是一种W3C候选推荐标准。

在React Conf 2017大会上,Lin Clark通过名为React Fiber简介的演讲循序渐进介绍了新协调器的独到之处。

大部分情况下,开发者无需担心代码的适配问题,但也有少量应用依赖以特定顺序进行的生命周期钩子(Lifecycle hook)。由于顺序已经无法保证,因此可能会遇到一些问题。

“为确保这一特性不会影响应用”,Clark称:“Fiber团队正在制定更为平缓的升级路径”。

Dan Abramov写到,React团队认为大部分React应用不会因为第16版而遇到问题:

React 16(正在开发中)是一次革新,但也使用了相同的公开API。对于Facebook所使用的超过30,000个(!)组件,其中只有少量需要改动,并且这少数组件主要被一些已经不再支持或没有正式记录在案的行为所使用。因此可以说完全可以保证99.9%的兼容性。这也让我们确信React 16基本上也可以直接适用于你的代码。

Fiber将在React 16中首次登场,第16版不仅包含新的协调引擎,而且提供了可串联使用的全新渲染器(例如ReactDOM、React Native)。同时isfiberreadyyet.com提供了测试套件的最新结果。截至撰写本文时,已顺利通过了92.2%的测试。

本文转自d1net(转载)

相关文章
|
8月前
|
前端开发 JavaScript 调度
【第32期】一文学会用React Fiber提升性能
【第32期】一文学会用React Fiber提升性能
127 0
|
2月前
|
前端开发 调度 UED
React 执行过程中 Fiber 的优先级是如何确定的?
【10月更文挑战第27天】React能够更加智能地管理任务的执行顺序,在保证用户交互体验的同时,充分利用系统资源,提高应用的整体性能和响应速度。
|
3月前
|
存储 前端开发 JavaScript
深入理解React Fiber架构及其性能优化
【10月更文挑战第5天】深入理解React Fiber架构及其性能优化
127 1
|
2月前
|
前端开发 JavaScript 调度
React 的 fiber
【10月更文挑战第26天】React Fiber 是 React 框架中的一个重要创新,它为 React 应用的性能优化和用户体验提升提供了强大的支持,使得 React 在处理复杂的前端应用场景时更加高效和灵活。
|
5月前
|
缓存 前端开发 JavaScript
理解 React 的 Fiber 架构
【8月更文挑战第6天】 理解 React 的 Fiber 架构
239 1
|
8月前
|
移动开发 前端开发 JavaScript
react fiber架构【详细讲解,看这一篇就够了】
react fiber架构【详细讲解,看这一篇就够了】
560 0
|
前端开发
前端学习笔记202307学习笔记第六十天-react源码-子级节点Fiber对象的构建流程
前端学习笔记202307学习笔记第六十天-react源码-子级节点Fiber对象的构建流程
77 0
前端学习笔记202307学习笔记第六十天-react源码-子级节点Fiber对象的构建流程
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-Fiber数据结构介绍2
前端学习笔记202307学习笔记第五十七天-react源码-Fiber数据结构介绍2
67 0
|
前端开发
前端学习笔记202307学习笔记第五十七天-react源码-Fiber数据结构介绍1
前端学习笔记202307学习笔记第五十七天-react源码-Fiber数据结构介绍1
75 0
|
前端开发
前端学习笔记202307学习笔记第五十九天-react源码-Fiber数据结构介绍
前端学习笔记202307学习笔记第五十九天-react源码-Fiber数据结构介绍
74 0