React 基础与实践|青训营笔记

41 阅读2分钟

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算法