React简介与特性
React是一个用于构建用户界面的 JavaScript 库。
声明式：强调程序代码需要做什么，而不必编写每一步的具体实现步骤。
组件化：将页面拆分为各种组件，组件自身拥有状态，也可以在外部传入属性。
跨平台：借助渲染器（用于解析虚拟DOM对象）能够实现跨平台的程序运行。
React组件更新流程
React16的基本架构
Renderer（渲染器）：负责渲染更新的组件到页面。
- 用于管理一颗Fiber树
- 根据不同的底层平台进行调用
Scheduler（调度器）：管理任务的优先级调度。
- 维护时间切片
- 浏览器任务调度
- 任务优先级调度
Reconciler（协调器）：负责比对确定更新的组件。
- 将JSX转换为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
（点击一个button，让state.count由1改变为2的）更新流程：首先由调度器接收到更新，调度器判断有无其他高优任务；有则优先执行其他高优任务，没有则将该段虚拟DOM的更新信息交由协调器，协调器负责将更新的虚拟DOM打上标志，同时基于双缓存进行Fiber树节点对比，对比后将会生成新的Fiber树替换原有的Fiber树。然后将更新的Fiber树交由渲染器负责渲染到页面上。
Fiber节点和Fiber树
Fiber节点主要有三个职责：缓存组件的信息，缓存组件的状态，连接其他的Fiber节点。
每一个Fiber节点对应一个React element，多个Fiber节点之间通过以下属性连接在一起成为Fiber树：
this.return = null; // 父级Fiber节点
this.child = null; // 子级Fiber节点
this.sibling = null; // 右侧第一个兄弟Fiber节点
如下图所示，为函数式组件和Fiber树之间的对应关系：
协调器中的双缓存Fiber树
React16架构中的协调器最多存在两颗Fiber树；一个为对应当前显示页面的current Fiber树，另一个为内存中构建的workInProgress Fiber树。如下图所示，两颗树的fiber节点通过alternate属性连接在一起：
过程分析：当组件的状态更新时会在内存中构建一颗workInProgress Fiber树，与原来的current Fiber树进行节点对比。当协调器确定需要更新的节点后，原来的current Fiber树将会被workInProgress Fiber树替代成为新的current Fiber树。
其中workInProgress Fiber树的创建可以复用当前的current Fiber树，而这个决定是否复用的过程就是React的Diff算法。