HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

深入了解 React 新引擎:React Fiber

  • 2017-05-09
  • 本文字数:1080 字

    阅读完需:约 4 分钟

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% 的测试。

阅读英文原文 React Fiber: A Closer Look at the New Engine of React

2017-05-09 19:003275
用户头像

发布了 283 篇内容, 共 106.6 次阅读, 收获喜欢 62 次。

关注

评论

发布
暂无评论
发现更多内容

TAOS Data 陶建辉:一个开源项目要成功,最关键的是定位 | 大话开源Vol.12

OpenTEKr

大话开源

架构实战营 - 模块四

Geek_e6f7f6

架构训练营

盘点 2021|鲜花怒马少年时,一日看尽长安花

AXYZdong

盘点 2021

从零打造WhatsApp

俞凡

架构 大厂实践 whatsapp

架构实战-模块八-作业

无名

「架构实战营」

KubeEdge 王泽锋:只有代码没有生命力,凝聚开发者的社区才能活力无限Vol.8

OpenTEKr

大话开源

我选择了VSCode

xcbeyond

vscode 28天写作 12月日更

模块八作业:设计消息队列存储消息数据的 MySQL 表格

dean

架构实战营

盘点2021 | 本命年的自我救赎之路

打工人!

盘点 2021 1月月更

瞰见|从电厂螺蛳里看 Elastic 与亚马逊云的恩怨情仇

OpenTEKr

狄安瞰源

SkyWalking 吴晟:好的开源项目,要能解决真实且有共性的问题

OpenTEKr

大话开源

向未来飞驰:武汉推开了AI产业化和产业AI化的三重门

脑极体

如何在 Windows Server 上搭建 Git Repository Server?

吴脑的键客

git windows

SphereEx 潘娟:玩开源,我们就要秀出别样 My Way 来构建活力生态 | 大话开源Vol.11

OpenTEKr

大话开源

Wechaty 李卓桓:我想要某种功能,你没有?那我来一个

OpenTEKr

开源 大话开源

操作系统之进程管理、内存管理总结

yuexin_tech

内存 进程 操作性

【LeetCode】将一维数组转变成二维数组Java题解

Albert

LeetCode 每日一题 1月月更

01 Prometheus之监控基础知识

穿过生命散发芬芳

Prometheus 1月月更

瞰见 | 美股新贵Confluent背后的卡夫卡,不是那个魔幻小说家

OpenTEKr

狄安瞰源

VMware 任道远:中国的开源生态还处在萌芽发展的青春期,需要多元力量和全球化协作 I OpenTEKr 大话开源 Vol.9

OpenTEKr

大话开源

开源社林旅强:开源之于创新,有时无招胜有招

OpenTEKr

大话开源

元宇宙很好,但VR开发者不准备停留在这里

脑极体

2021阅读总结

俞凡

阅读

LabVIEW图像灰度测量(基础篇—7)

不脱发的程序猿

机器视觉 图像处理 LabVIEW 图像灰度测量 像素灰度

如何将List<Integer>转换为int[]数组

liuzhen007

Java 28天写作 12月日更

一个cpp协程库的前世今生(六)管理器manager

SkyFire

c++ cocpp

yuye 个人介绍

努力努力再努力

Java 中间件

一个cpp协程库的前世今生(七)ctx的状态与标识位

SkyFire

c++ cocpp

APISIX 温铭:开源的本质是要撬动开发者的杠杆 | 大话开源Vol.13

OpenTEKr

大话开源

瞰见|即将上市的云明星 HashiCorp 走过的开源之路

OpenTEKr

开源 狄安瞰源

Kyligence 韩卿:开源改变了人类生产软件的方式 | 大话开源Vol.10

OpenTEKr

大话开源

深入了解React新引擎:React Fiber_JavaScript_David Iffland_InfoQ精选文章