React源码Part2——React15和React16的渲染原理

Posted 冷咖啡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React源码Part2——React15和React16的渲染原理相关的知识，希望对你有一定的参考价值。

React源码Part-1——代数效应：https://segmentfault.com/a/11...
React源码Part3——Fiber架构：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Mount阶段)：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Update阶段):https://segmentfault.com/a/11...
React源码Part5——commit阶段(处理class组件生命周期)： https://segmentfault.com/a/11...
React源码Part6——Commit阶段(beforeMutation)：https://segmentfault.com/a/11...
React源码Part7——Commit(Mutation阶段)： https://segmentfault.com/a/11...
React源码Part8——Commit(Layout阶段)：https://segmentfault.com/a/11...
参考链接：React技术揭秘——https://react.iamkasong.com/p...

本文主要解释React15和React16与渲染机制的原理

React15的底层渲染原理

  • 渲染机制是同步更新的
  • 在React15中，有Reconciler(协调器)、Render(渲染器)这两个机制负责Dom的更新和渲染。
  • Reconciler：本次更新中哪些节点需要更新，在相应的虚拟DOM打上标记，然后交给Render渲染器，Diff算法就是发生在这个阶段。这里指虚拟DOM节点的更新，并不是视图层的更新
  • Renderer：负责渲染更新的虚拟DOM，根据不同的内容或环境使用不同的渲染器。如渲染jsx内容使用ReactTest渲染器，虚拟DOM使用浏览器V8引擎或SSR渲染。。。
  • 对于当前组件需要更新内容是依次更新，Reconciler发现一个需要更新的节点后就交给Renderer渲染器渲染。完成后Reconciler又发现下个需要更新的节点，再交给Renderer渲染器...直到此次更新内容全部完成，整个更新流程是同步执行的。
  • 缺陷：如果在更新过程中突然终止，会造成后面需要更新的内容全部中断，即更新失败。原因就是渲染的底层机制是同步进行的

React16的底层渲染机制

  • React16的渲染机制借用了代数效应的思想，即渲染过程可异步。在异步渲染过程中，不会销毁后面待更新的内容；且异步更新完成后，回来接着上次更新的内容继续更新。
  • React16中，新增了Scheduler(调度器)，其底层渲染机制由Scheduler、Reconciler、Renderer三者共同完成
  • Scheduler：负责调度更新节点的优先级，给需要更新的节点打上不同的标记，再交给Reconiler，Reconiler会根据不同的优先级更新对应的虚拟DOM。
  • 渲染流程：Scheduler调度器给节点打上标记后，交给Reconciler协调器，Reconciler会执行优先级较高的节点，更新对应的虚拟DOM。当Scheduler有新的优先级比较高的节点交给Reconciler时，Reconciler会暂停正在执行的节点，并不会销毁，此时发生异步更新。当异步更新完成后，接着回来执行上次操作的节点。直到此次组件跟新内容全部打上标签后，再移交到Renderer渲染器渲染，统一更新到视图层。
  • React16渲染机制中的异步更新就是代数效应的思想，Scheduler和Reconciler发生在计算机内存中，所以交互速度快得飞起，不同担心耗时问题。

React15和React16渲染机制的区别

  • React16多了个Scheduler调度器，负责调度不同情况下节点更新的优先级
  • React15是同步更新节点，Reconciler更新一个DOM节点，Renderer更新一次视图，递归更新；React16是Reconciler将虚拟DOM节点全部更新完成后才移交给Renderer更新。

React16不使用Generator的原因