作为一个构建用户界面的库,React的核心始终围绕着更新这一个重要的目标,将更新和极致的用户体验结合起来是React团队一直在努力的事情。为什么React可以将用户体验做到这么好?我想这是基于以下两点原因:
- Fiber架构和Scheduler出色的调度模式可以实现异步可中断的更新行为。
- 优先级机制贯穿更新的整个周期
本文是对React原理解读系列的第一篇文章,在正式开始之前,我们先基于这两点展开介绍,以便对一些概念可以先有个基础认知。
配合的源码调试环境在
这里 ,会跟随React主要版本进行更新,欢迎随意下载调试。
Fiber是什么
Fiber是什么?它是React的最小工作单元,在React的世界中,一切都可以是组件。在普通的HTML页面上,人为地将多个DOM元素整合在一起可以组成一个组件,HTML标签可以是组件(HostComponent),普通的文本节点也可以是组件(HostText)。每一个组件就对应着一个fiber节点,许多个fiber节点互相嵌套、关联,就组成了fiber树,正如下面表示的Fiber树和DOM的关系一样:
Fiber树 DOM树
div#root div#root
| |
<App/> div
| /
div