React架构浅析-V16以上版本

一、架构

1. 架构理念

React官网有一句话

我们认为，React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。他在Facebook 和 Instagram 上表现优秀

可见‘快速响应’成为了React的关键词，为了实现这一点 React 将之前（V15版本）的同步更新变为可中断的异步更新

1.1 如何‘快速响应’

我们知道，JS可以操作DOM，但是GUI渲染和JS脚本执行是互斥的，当JS执行时间过长，超出1000ms / 60hz(主流浏览器的刷新频率) = 16.6ms时，就没有时间进行页面布局和样式绘制，导致页面卡顿
React会在浏览器的每一帧时间里，预留一些时间给JS线程，当这部分时间不够用时会把线程控制权返还给浏览器使其进行ui渲染，而React则等待下一帧时间继续进行被中断的工作，这种操作也被称为‘时间切片’

2. 架构层次

React16 架构可以分为三层：
● Scheduler（调度器）
● Reconciler（协调器）
● Renderer（渲染器）

2.1 Scheduler（调度器）

React是以浏览器是否有剩余时间作为任务中断的标准，当浏览器有剩余时间时就得通知应用，而实现这一机制的就是Scheduler，并且Scheduler还提供了多种调度任务优先级的设置

2.2 Reconciler（协调器）

在之前的版本Reconciler是递归处理虚拟DOM的，而在16及以上版本，更新工作从递归变成了可以中断的循环过程，因为递归不可中断，且层级过深容易造成卡顿，所以现在改成循环，并且每次循环都会调用这个‘shouldYield’函数判断当前是否有剩余时间

2.3 Renderer（渲染器）

Reconciler根据Scheduler的任务调度为变化的虚拟DOM打上标记，Reconciler和Scheduler的工作都是在内存中进行，而Renderer根据打上标记的虚拟DOM是同步执行对应的DOM操作的
所以可中断的异步更新最主要体现在‘有其他更高优先级任务需要更新’或者‘当前帧没有剩余时间’，由于都是在内存中进行，还没有到渲染阶段，所以即使反复中断，用户也不会看见更新不完全的DOM。

二、心智模型

1. 代数效应

React Hooks的发明者曾说：我们在React中做的就是践行‘代数效应’。
代数效应：函数式编程的一个概念，用于将副作用从函数调用中分离，即纯函数。
React 中实行‘代数效应’最明显的莫过于Hooks，我们只需要确定返回的state是我们想要的，然后直接编写业务逻辑即可，例：

2. Fiber

2.1 含义

Fiber可以理解为是‘代数效应’在JS中的一种实现。
React实现的状态更新机制支持任务的不同优先级，并且可中断，可恢复继续更新，每个任务更新单元也叫做‘Fiber节点’。
作为静态的数据结构来说，每个Fiber节点对应一个React element，保存了该组件的类型、对应的DOM节点等信息。
作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件要改变的状态、要执行的工作。

2.2 双缓存

Fiber树的构建和替换（对应DOM树的构建和替换）是在内存中进行的，这种技术被称为‘双缓存’。

2.3 工作原理

React中最多会同时存在两颗Fiber树，当前屏幕上显示内容对应的Fiber树称为current Fiber树，正在内存中构建的Fiber树称为workInProgress Fiber树R。
当workInProgress Fiber树构建完成交给Renderer（渲染器）渲染在页面上后，应用根节点的current指针就会指向workInProgress Fiber树，此时workInProgress Fiber树就变为current Fiber树，而React在构建workInProgress Fiber树时会尝试复用current Fiber树中已有的Fiber节点内的属性，这个对比复用过程也被称之为React的‘diff算法’。

参考

本文参考《React技术揭秘》，是一个记录学习过程～