react源码阅读

总体概览

新旧react分析

老版本react 15

1. 整体架构： 主要由协调器(Reconciler)和渲染器(Renderer)组成,协调器主要用于协调那些组件(Diff算法就发生在协调器中)需要渲染然后将需要渲染的组件运送到渲染器(不同的渲染器会渲染到不同环境的视图中)进行渲染。
2. 更新方式：同步更新， 每个组件都是先执行协调器再执行渲染器，会导致第一个child总是先于第二个child更新，但是整个更新是同步的因此看不出区别。

新版本react 16

1、整体架构：主要由调度器(Scheduler)、协调器(Reconciler)和渲染器(Renderer)组成。
2. 更新方式：异步可中断更新，每个更新都会有一个优先级，调度器(Scheduler)按照优先级管理所有更新，高优先级的更新会先进入协调器(Reconciler)，但是倘若此时发生一个更高优先级的更新，正在协调的更新会被中断进而协调高优先级的更新。并且由于协调器和调度器都发生在内存，与视图的更新无关因此用户不会看到只更新一半的情况。
3. Fiber树： fiber树由fiber节点构成(组件的type和dom节点等信息)，每个应用都会有一个FiberRootNode来管理所有的fiber节点，会有多个或者一个RootFiber根节点，FiberRootNode.curent指向当前渲染的RootFiber，alternate会连接currentFiber树 和workInprogressFiber树这样可以在更新时共用资源。