如何理解 React Fiber 架构?

在 Hacker News 上看到一篇叫做 React Fiber architecture 的文章,作者是 React 项目的开发者,文章说 React Fiber 是对 React 近两年开发工作的总结,将会重新实现 React 的核心算法,并且会提供增量渲染等新特性。 文章:GitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React Fiber Hacker News 讨论:React Fiber Architecture
关注者
757
被浏览
26314

14 个回答

conf.reactjs.org/ 上,Lin Clark 通过漫画为我们介绍 Fiber,结合她的介绍,我谈谈我的理解:

Fiber 可以提升复杂React 应用的可响应性和性能。Fiber 即是React新的调度算法(reconciliation algorithm)

react 即 reconsiler(调度者),react-dom则是 renderer。调度者一直都是又 React 本身决定,而 renderer 则可以由社区控制和贡献。

那新的调度算法是如何优化可响应性和性能的呢 ?

每次有 state 的变化 React 重新计算,如果计算量过大,浏览器主线程来不及做其他的事情,比如 rerender 或者 layout,那例如动画就会出现卡顿现象。

React 制定了一种名为 Fiber 的数据结构,加上新的算法,使得大量的计算可以被拆解,异步化,浏览器主线程得以释放,保证了渲染的帧率。从而提高响应性。

React 将更新分为了两个时期:

render/reconciliation

可打断,React 在 workingProgressTree 上复用 current 上的 Fiber 数据结构来一步地(通过requestIdleCallback)来构建新的 tree,标记处需要更新的节点,放入队列中。

commit

不可打断。在第二阶段,React 将其所有的变更一次性更新到DOM上。

除此之外,还有更多的优化细节,可以参看 Lin Clark 的演讲视频


广告时间

欢迎关注 前端外刊评论 - 知乎专栏,外刊君将会代码 React Conf 2017 的全部解读。也可以微信、微博搜索 FrontendMagazine 关注,期待后续。

分析原文,作者的思路是这样的:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(1)发现痛点

To go further, let's go back to the conception of React components as functions of data, commonly expressed as v = f(d).

It follows that rendering a React app is akin to calling a function whose body contains calls to other functions, and so on. This analogy is useful when thinking about fibers.


When dealing with UIs, the problem is that if too much work is executed all at once, it can cause animations to drop frames and look choppy.

React的UI解决方案是,View = F(Data),
页面中的所有相关的React Components共同组成了F,Components之间是互相调用的关系。
页面复杂的话,这个调用栈会很深,导致UI变卡。
(一旦执行,我们就不能干扰它。。

(2)脑洞
Wouldn't it be great if we could customize the behavior of the call stack to optimize for rendering UIs? Wouldn't it be great if we could interrupt the call stack at will and manipulate stack frames manually?

如果可以随意操纵这些调用栈就好了,容我先返回搞一下UI,接着再计算可否?


That's the purpose of React Fiber. Fiber is reimplementation of the stack, specialized for React components. You can think of a single fiber as a virtual stack frame.

我还是起一个高大上的名字吧,我称这个为“虚拟调用栈”。

(与“虚拟DOM”起到了遥相呼应的效果。。


(3)设计测试驱动开发

We've established that a primary goal of Fiber is to enable React to take advantage of scheduling. Specifically, we need to be able to

a) pause work and come back to it later.

b) assign priority to different types of work.

c) reuse previously completed work.

d) abort work if it's no longer needed.


说白了,我们就是想实现一个任务调度器。

它可以暂停一个任务,一会再回来执行,还能给任务分配优先级,

或者重新启用一个已停止的任务,删掉某个不再使用的任务。


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

这篇文章看下来,觉得此项工作在其他语言环境中提及的话并没有什么特别的。

只不过JavaScript是用户代码单线程的语言,容易让人误以为执行的任务是无法调度的。

其实JavaScript有自己的并发模型,详见: Concurrency model and Event Loop


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

如果作者说的这些,你总觉得在哪里见过,请移步:Ruby Fiber