Fiber起源Fiber架构诞生于React16，解决了React15及之前版本更新无法中断的问题。StackCoordinatorStackReconciler我们知道React在工作的时候有一个重要的阶段叫做协调阶段Reconcile。在React15中，React仍然使用堆栈协调StackReconciler。之所以叫栈协调，是因为React是使用递归构建虚拟Dom树（React15的名称），在构建过程中，数据保存在递归调用栈中。由于递归是同步执行的，所以只能执行一次，不能中途中断。这样一来，当浏览器执行代码时，StackReconciler由于需要协调很多节点，往往会耗费大量时间，导致浏览器的UI渲染工作延迟，从而导致浏览器掉帧肉眼。FiberCoordinatorFiberReconciler为了解决StackReconciler的递归调用，React团队在React16发布时推出了全新的Fiber架构，旨在解决老版本不间断更新的问题。React团队提出了一种新的模式**ConcurrentMode**。一个大的同步任务可以分解成很多个小的同步任务。当浏览器运行时，这些小的同步任务被均匀地塞进每一帧中。在一小段时间内执行，我们称之为可中断的异步更新。而我们知道，在React15中，由于架构的限制，同步任务是离不开的。一旦任务被挂起，所有的任务只能被打断。但是权限的fiber架构可以保存更新的运行状态，这样下次调用的时候可以继续上次的更新。因此，Fiber架构为ConcurrentMode的实现奠定了基础。这种可中断更新解决了卡顿和掉帧的问题，也给用户带来了更好的交互体验。Fiberworkflow在React15中，我们知道有一个虚拟的DOM树，用来和真实的DOM建立映射关系。在Fiber架构中，我们将物种映射到Fiber树中。一个Fiber由一个当前应用根节点FiberRootNode和一个当前组件树根节点rootFiber组成。rootFiber实际上是一个FiberNode，它连接到一个由其他FiberNode组成的子树。FiberRootNode通过当前指针连接到当前组件树的rootFiber。这里我们用currentcomponenttree这个词，其实就是介绍Fiber架构下的双缓冲机制。双缓冲机制我们在处理图像的时候，经常会经历渲染屏幕-清屏-重新渲染屏幕的过程。清除屏幕后重新绘制屏幕可能很耗时。这时候，用户就会感知到闪屏现象。如果我们在内存中构建当前帧，构建完成后直接替换上一帧，省去了清屏，这样可以节省大量时间，大大提升用户体验。所以在React中，我们也采用了双缓冲机制，即系统中始终存在两棵Fiber树，其中一根对应当前显示在屏幕上的DOM，称为current。这个时候，我们称它为当前的组件树，在内存中建立了一个新的Fiber树，叫做workInProgress，我们这个时候称它为正在构建的组件树。Fiber树示例在以下代码渲染的组件中/header>
