1、架构体系三大模块

  • 调度
  • 协调
  • 渲染

体系
理念篇

1.2、React 设计理念 —— 快速响应

React 快速相应的设计理念
JS脚本 -> 样式布局 -> 样式绘制
JS可以操作DOM，GUI渲染线程与JS线程是互斥的
1000ms/60HZ = 16.6ms 浏览器刷新一次
计算能力 CPU IO 瓶颈
网络延迟
CPU瓶颈 -> 浏览器渲染频率和脚本运行时间的关系
IO瓶颈-> 人机交互的成果融入UI交互 -> 异步更新机制
解决办法： 异步可中断的更新

1.3、React架构的演进史

1、 React15 老得架构

  • 决定渲染什么 Reconciler（协调器） 决定渲染什么组件，diff算法， 上次更新的组件和本次组件对比
  • 将组件渲染到视图 Render (渲染器) 决定渲染到视图中 ReactDOM(浏览器，SSR)、ReactNative(渲染原生APP)、ReactTest（渲染JS对象)、ReactArt渲染器(canvas SVG)

image.png
老得不能实现异步可中断的更新

React15为什么不支持异步可中断的操作呢？
答: 因为在老得Reconciler中由于递归执行，所以更新一旦开始，中途就无法中断。当层级很深时，递归更新时间超过了16ms，用户交互就会卡顿。—— 所以要用可中断的异步更新来代替老版本中的异步更新,
老得版本如果中断发送，就会造成bug，无法显示所以的更新。而且中断后不会继续。所以React才会重构

2、React16 新的架构中

  • 调度更新 （调度器 —— 优先级）
  • 决定需要更新什么组件
  • 将组件更新到视图中

image.png
image.png

1.4、React新架构 —— Fiber(纤程)

我们在React中践行的就是代数效应

进程(Process)
线程(Thread)
协程(Coroutine) Generator
纤程(Fiber)
为什么要用Fiber来达到中断的目的，而不是使用已有的Generator，Generator也可以达到中断的目地
答案是Fiber架构的初衷是两个目的，1是可以中断更新，可以暂停再更新 2是可以选择优先级，高优先级的先更新
Generator还有一个缺点是和Async、await一样具有传染性。会累及其他函数， 基于这些原有，React团队决定实现一套全新架构

1.5 Fiber架构的原理

Fiber含义：静态的数据结构、动态的工作单元 、架构

1.5-1、Fiber双缓存的工作原理

首屏渲染与更新最大的区别就是是否有diff算法参与
React如何利用双缓存更新页面
当首次调用React.renderDom时，会创建整个项目的根节点FiberRootNode
FiberRootNode -> current -> 当前DOM根节点RootFiber
不管首次还是更新还是hooks，都会从根节点开始创建一颗Fiber数，两颗树之间用alternate链接，方便公用一些属性，接下来采用深度优先遍历 模拟递归的方式，创建整个Fiber树
左侧current Fiber树，右侧workInProgress Fiber树。 当右侧的workInProgress Fiber树构建完成后，RootFiber 会将current指针指向右侧的workInProgress Fiber树变成了current Fiber树，此时左侧的成了workInProgress Fiber树，此时再次更新JSX结构 会比对当前的current Fiber树，这就是DIFF算法。 当左侧树更新完成后，RootFiber再次将current指针指向左侧，左右树交换状态…

image.png

1.6、如何调试源码

拉取代码、安装依赖(React、ReactDOM、scheduler)、create-react-app

  1. git clone https://github.com/facebook/react.git
  2. cd react 
  3. yarn
  4. yarn build react/index,react-dom/index,scheduler --type=NODE
  5. 进入build创建软链react、react-dom
  6. cd build/node_modules/react
  7. # 申明react指向
  8. yarn link
  9. cd build/node_modules/react-dom
  10. # 申明react-dom指向
  11. yarn link
  12. npx create-react-app reactsource
  13. # 将项目内的react react-dom指向之前申明的包
  14. yarn link react react-dom
  15. 在react/build/node_modules/react-dom/cjs/react-dom.development.js下面打印东西 验证
  16. 我们的运行时代码就和React最新代码一致了

文件缺失bug