免费下载案例集|20+数字化领先企业人才培养实践经验 了解详情
写点什么

深入了解 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:003266
用户头像

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

关注

评论

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

向线程池提交任务

急需上岸的小谢

6月月更

使用 select 切换协程

宇宙之一粟

golang 6月月更

为什么需要微服务

阿泽🧸

微服务 6月月更

数据库每日一题---第9天:销售员

知心宝贝

数据库 算法 前端 后端 6月月更

LabVIEW控制Arduino实现红外测距(进阶篇—6)

不脱发的程序猿

单片机 LabVIEW VISA Arduino Uno 红外测距

LabVIEW Arduino电子称重系统(项目篇—1)

不脱发的程序猿

单片机 LabVIEW VISA ​Arduino Uno 电子称重系统

flutter系列之:flutter中常用的container layout详解

程序那些事

flutter 程序那些事 6月月更

leetcode 257. Binary Tree Paths 二叉树的所有路径(简单)

okokabcd

LeetCode 搜索 数据结构与算法

消息队列入门MQ

卢卡多多

MQ 消息队列 6月月更

5分钟了解攻防演练中的红蓝紫

穿过生命散发芬芳

6月月更 攻防演练

WWDC22 开发者需要关注的重点内容

37手游iOS技术运营团队

iOS16 WWDC22 Xcode14 iPadOS16 macOS10.16

基于华为云图像识别标签实战

乌龟哥哥

6月月更

ConcurrentHashMap 源码分析-put方法

zarmnosaj

6月月更

思科私有动态路由协议:EIGRP

wljslmz

动态路由 6月月更 路由协议 EIGRP

Java—并发容器

武师叔

6月月更

模块八作业

库尔斯

#架构实战营

Flutter doctor 显示xcode没有安装的解决办法

坚果

6月月更

【愚公系列】2022年06月 面向对象设计原则(六)-合成复用原则

愚公搬代码

6月月更

什么是Vue3的组合式 API?

源字节1号

软件开发 小程序开发

消息队列存储消息数据的 MySQL表

Dean.Zhang

RF中使用reuqests的两种方式

红毛丹

Python 6月月更

BottomSheetDialog 使用详解,设置圆角、固定高度、默认全屏等

yechaoa

android dialog 6月月更 material design

【Spring 学习笔记(十)】Spring 使用注解整合 Mybatis

倔强的牛角

Java spring Java EE 6月月更

直播预告|FeatureStore Meetup V3 重磅来袭!

星策开源社区

机器学习 开源 DevOps 特征平台 MLOps

【Python技能树共建】lxml 模块

梦想橡皮擦

Python 6月月更

一文读懂Logstash原理

恒山其若陋兮

6月月更

预解析与作用域

Jason199

js 全局作用域 作用域 6月月更

vue自定义指令

小恺

6月月更

LabVIEW控制Arduino实现超声波测距(进阶篇—5)

不脱发的程序猿

单片机 LabVIEW Arduino VISA 超声波测距

动态规划之0-1背包问题(详解+分析+原码)

未见花闻

6月月更

volatile的解构

卢卡多多

volatile 6月月更

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