写点什么

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

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

关注

评论

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

Android面试:一个进程有多少个-Context-对象?看似初级的问题,答的好的人确不多

android 程序员 移动开发

Android高频网络面试专题必知必会

android 程序员 移动开发

Android:帧动画和补间动画看这篇就足够了!

android 程序员 移动开发

Android:彻底消灭OOM的实战经验分享(千分之1-5----万分之0-2)

android 程序员 移动开发

APP终极瘦身方案

android 程序员 移动开发

ARouter系列3:继续学习(手写一个Arouter框架)

android 程序员 移动开发

Cocos2d-x 3

android 程序员 移动开发

DatePickerDialog时间选择器+MVPPlugin开发插件的使用

android 程序员 移动开发

Android面试题(window、进程、线程篇

android 程序员 移动开发

Android高级面试题:面试十几家公司入职外企后,掌握这几个关键点面试通过率很大

android 程序员 移动开发

App 金刚区导航菜单,类似淘宝、QQ 音乐等 APP 导航,方格布局横向滑动翻页带滚动条

android 程序员 移动开发

App基于手机壳颜色换肤?先尝试一下用 KMeans 来提取图像中的主色

android 程序员 移动开发

App怎么做才能永不崩溃

android 程序员 移动开发

Android面试:IntentService源码分析

android 程序员 移动开发

C语言(二):指针基础

android 程序员 移动开发

Dalvik 和 ART 有什么区别?深扒 Android 虚拟机发展史,真相却出乎意料!(1)

android 程序员 移动开发

Android题集四大组件之Service

android 程序员 移动开发

Android:AsyncTask使用

android 程序员 移动开发

APP 热修复都懂了,你会 SDK 热修复吗?最全方案在这里!

android 程序员 移动开发

Dalvik 和 ART 有什么区别?深扒 Android 虚拟机发展史,真相却出乎意料!

android 程序员 移动开发

AOP 最后一块拼图 _ AST 抽象语法树 —— 最轻量级的AOP方法

android 程序员 移动开发

Cocos2d-x 3(1)

android 程序员 移动开发

Dagger2在SystemUI中的应用

android 程序员 移动开发

Android高级架构师整理面试经历发现?(大厂面经+学习笔记

android 程序员 移动开发

ClassLoader在热修复中的应用

android 程序员 移动开发

cmake使用教程(九)-关于安卓的交叉编译

android 程序员 移动开发

Bmob后端云+ImageLoader框架实现图文列表

android 程序员 移动开发

Dart _ 浅析dart中库的导入与拆分

android 程序员 移动开发

Angular-集成-Typescript-版本-Echarts-(附代码)

android 程序员 移动开发

AsyncTask相关知识

android 程序员 移动开发

BAT资深面试官-带你破解Android高级面试

android 程序员 移动开发

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