React源码二 - React16版本架构

资源

各种进阶资源 + 联系方式请看下方链接
资源

• React 16版本架构可以分为三层：调度层、协调层、渲染层
  • Scheduler(调度层)：调度任务的优先级，高优任务优先进入协调器
  • Reconciler(协调层)：构建fiber数据结构，对比fiber对象找出差异，记录fiber对象要进行的DOM操作
  • Renderer(渲染层)：负责将发生变化的部分渲染到页面上

  scheduler 调度层

  • 在React 15的版本中，采用了循环加递归的方式进行了virtualDom的比对，由于递归使用js自身执行栈，一旦使用就无法停止，直到任务执行完成。如果virtualDom树的层级比较深，virtualDom的比对就会长期占用js主线程，由于js又是单线程的无法同时执行其他任务，所以在比对过程中无法响应用操作，无法及时执行元素动画，造成了页面卡顿现象。
  • react16的版本中，放弃了js递归进行virtualdom的对比，而是采用循环模拟递归，且对比过程是利用浏览器的空闲时间完成的，不会长期占用主线程，这就解决了vitualDom对比造成页面卡顿的问题
  • 在window对象中提供了requestldleCallback API, 它可以利用浏览器的空闲时间执行任务，但是它触发频率不稳定，且也不是所有浏览器都兼容，所以react最终放弃了此API的使用
  • 在react中官方实现了自己的任务调度库，这个库叫做Scheduler。它也可以实现在浏览器空闲时执行任务，而且可以设置任务优先级，高优先级先执行，低优先级后执行
  • Scheduler存储在packages.scheduler文件夹中。

  Reconciler协调层

  • react 15的版本中，协调器和渲染器交替执行，即找到了差异就会直接更新差异，在react16版本中，这种情况发生了变化，协调器和渲染器不再交替执行。协调器负责找出差异，所有差异找出之后，统一交给渲染器进行DOM更新，也就是协调器的主要任务就是找出差异部分，并打上标记。

  Renderer渲染层

  • 渲染器根据协调器为Fiber节点打的标记，同步执行对应的DOM操作
  • 既然比对的过程从递归变成了可以中断的循环，那么react时如何解决中断更新时DOM渲染不完全的问题呢？
  • 其实根本不存在这个问题，因为在整个过程中，调度器和协调器的工作是在内存中完成的事可以被打断的，渲染器的工作被设定成为不可被打断，所以不存在dom渲染不完全的问题。