如何理解 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
关注者
844
被浏览
32301

15 个回答

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 关注,期待后续。

正好这几天在翻react的源码,写了篇这部分的文章:xieyu/blog