深入了解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（转载）

Deep In React之浅谈 React Fiber 架构(一) 2016 年都已经透露出来的概念，这都 9102 年了，我才开始写 Fiber 的文章，表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了，在写文章的时候参考资料比较多，比较容易深刻的理解。
六个问题让你更懂 React Fiber（上） 大家好，我是零一，很多人都摸不透React，看不懂源码，甚至不想看源码（确实很难看懂啊！）， 霸王硬上弓 肯定是不行呀，不如从React的整体架构或者说从最核心的Fiber开始了解，说不定能帮你更懂React呢！
图解React Diff算法及新架构Fiber 阿里云前端工程师靖鑫带来了React高阶组件在业务场景中的应用。首先从高阶组件的思想开始谈起，帮助我们灵活管理代码，介绍了简单的HOC示例、传递参数的HOC示例、反向继承HOC，进而讲述了HOC库recompose，然后通过图解重点说明了DOM DIFF算法，最后对新架构Fiber进行了简要介绍。