8-1 数据结构图的主要遍历实验流程图_ReactDOM渲染流程图

1. 入口是ReactDOM.render(, document.getElementById('root'))

子元素只是一个div元素的渲染流程图

2.第一排的几个逻辑，基本上包含其它的方法比较少，只是对数据进行处理，执行下面的流程

3.重点是performUnitOfWork的循环，循环逻辑是workInProgress不为空就执行，就一直执行performUnitOfWork，workInProgress是是上图中begginWork/completeWork的返回结果，也就是数的遍历，从上到下，从左到右，对应的下一个。

4. 其中performUniOfWork对于数据的协调是在reconcileChildren里去完成的，采用fiber的数据结构，结构中重点的几个属性，stateNode/return/child/sibling分别对应当前节点/父节点/第一个子节点/第一个兄弟节点，采用链表的结构操作树
5. 在第一排的renderRoot中有两部分的逻辑方法，一个是workLoopSync主要是下面performUniOfwork对数据的操作，另一个是commitRoot对虚拟DOM的渲染，在workLoopSync执行完成后执行commitRoot