看透react源码之感受react的进化

写在前面

网上有许多关于react源码解读的文章，其中有很多都只是单纯贴源码，罗列变量名。其实大家都知道这个英文怎么读，直译也大概知道意思，但是这个英文在react中起到什么作用，并没有说的很通俗明白。

对于刚刚接触源码或者想要了解react实现的人来说，没有起到引导作用，一堆函数变量反而劝退了很多人。

所以打算开启一个系列的文章，用简单的代码片段代替源码，拆解react的时间分片、优先级调度、diff等核心模块，让大家一眼就能明白其中的原理。

react15为什么需要进化

react15有两大原罪，渲染阻塞和无法合并异步函数里面的setState

原罪1：同步渲染阻塞主线程

react15从setState到DOM节点渲染到页面上，整个流程都是同步的，所以如果其中某个环节占用时间特别长，就会造成主线程阻塞。

由于JS的执行是单线程的，JS线程与浏览器的其他线程互斥，如果JS线程阻塞，浏览器的渲染线程、事件线程也会相应的挂起。此时用户触发的浏览器原生事件也会无响应，造成卡顿的现象。

疑问：react15什么情况下会造成阻塞？

react15采用的是树形结构的虚拟DOM树，使用了递归方式的进行节点遍历，递归意味着虚拟DOM树的构建是一个同步的过程，只要一开始就无法中断。而且DOM节点层级越深，节点数越多，diff流程霸占JS线程的时间就越长。

当然网上都是这么说，实际上是不是真的是树形结构，是不是真的用递归的方式进行节点遍历，还是需要经过实际源码考证，为此我翻看了react@15.5.3的源码

求证1：树形结构

<div key={
   '最外层节点'}>
  {
   
    ['a', 'b', 'c', 'd'].map( (v,index) =>
      <div key={
   `第一层子节点 - ${
     v}`}>
        <span key={
   `${
     v}的子节点`}>parentNode：{
   v}<