react源码阅读
总体概览
新旧react分析
老版本react 15
- 整体架构: 主要由协调器(Reconciler)和渲染器(Renderer)组成,协调器主要用于协调那些组件(Diff算法就发生在协调器中)需要渲染然后将需要渲染的组件运送到渲染器(不同的渲染器会渲染到不同环境的视图中)进行渲染。
- 更新方式:同步更新, 每个组件都是先执行协调器再执行渲染器,会导致第一个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树这样可以在更新时共用资源。