react作为当今热门的框架语言，源码的学习显得尤为必要，但当着手去学习的时候，发现源码内容太多、复杂度太高，根本无从下手。刚开始学习时，一脸茫然和懵逼，后续则不了了之，只好放弃。
此系列文章目的在于帮助大家从0开始一步步渐进式的理解react底层运行原理。
文章是在react18源码基础上进行剖析，作为系列文章的开篇，不得不谈fiber架构，这是react的构成，从思想上先理解架构，后续我们会针对细节再逐一击破；话不多说，我们发车吧！！！
- fiber架构是什么？
- fiber架构如何工作？
- fiber解决了什么问题？
要弄明白以上的问题，首先得明白在react16之前的stack架构遇到的问题。
设想下，当我们的react应用十分庞大，也就意味着我们可能有成千上万个组件，我们具有棵嵌套层级很深的virtual dom tree,每当触发更新，这棵树就开始递归元素逐一diff，导致js运行的时间过长。
我们知道渲染主线程同一时间只能做一件事情，要么是js运行要么是渲染，js运行过久势必造成页面动画渲染出现卡顿、用户交互的行为无法立马反馈出来，这样的体验是糟糕的。
而fiber架构的出现带来了异步渲染的概念，不会再继续进行长时间的diff过程，这就是第三个问题的答案。
fiber架构中分为三层：调度层、协调层、渲染层
-
调度层------调度任务的优先级，高优任务优先进入协调器
-
协调层------构建整颗fiber数据结构并记录和收集副作用
-
渲染层------将标记的副作用渲染到页面中
我们把这3层的工作可以简单的串联下：
react把原先一个完整的diff任务拆成颗粒度更细的任务，给每个小任务分配5ms的js执行时间，当时间到达后，不管任务是否完成，调度层会对任务进行优先级的编排，取出优先级更高的任务，将其推入协调层中(这就是调度层做的事情)
协调层拿到任务后，会构建fiber的数据结构（fiber数据结构会在后续文章进一步阐述），这里可以类比于加强版的virtual dom，在构建的过程中会进行副作用标记(标记哪些节点需要增加、删除、更新)等等。
渲染层拿到协调层构建出来的fiber数据结构，针对副作用调用dom Api 完成页面渲染。
以上就是回答了前2点的问题。
总结：fiber架构带来了异步渲染，将任务拆解并区分优先级，解决了之前stack架构的痛点。
随着我们对架构的初步理解，相信大家也会有更多的疑问：
- 任务的优先级在react中具体是如何区分和排序？
- fiber数据结构是什么样子？如何构建这样的数据结构？目的是什么？
- 副作用是如何标记？
- 。。。。
- 。。。。
后续的文章会针对每个点进行概念、源码对照以及流程图进行一一解读，敬请期待~~
