fiber
什么是fiber，fiber解决了什么问题
在React16以前，React更新是通过树的深度优先遍历完成的，遍历是不能中断的，当树的层级深就会产生栈的层级过深，页面渲染速度变慢的问题，为了解决这个问题引入了fiber，React fiber由虚拟DOM转换而来，它是一个链表结构，返回了return、child、sibling，分别代表父fiber，子fiber和兄弟fiber，在遍历过程中随时可中断
应用目的 实现增量渲染，把一个渲染任务分解为多个渲染任务，然后将其分散到多个帧里。从而实现渲染任务的可中断、可恢复，并按优先级处理任务，达到更顺滑的用户体验
Fiber更新机制
-
React首次调用
ReactDOM.render创建两个Fiber，一个叫FiberRoot和rootFiber。- FiberRoot： 是React应用的节点，有且仅有一个。FiberRoot有个current指针，指针指向的rootFiber
- rootFiber：是挂载在页面中的组件节点，可以有多个，是我们渲染的内容。
-
首次加载时会·
FiberRoot的current指针指向rootFiber；当发生更新时，会创建一个新的rootFiber，这个rootFiber中的节点会尝试复用旧的fiber节点，这个过程会使用diff算法。当新的rootFiber节点构建完成，FiberRoot的current指针指向刚刚构建的rootFiber，视图完成更新。 -
Fieber的构建、更新、更换指针指向都是发生在内存中，速度贼快
什么是双缓存机制？
- 解决什么样的问题：当计算量较大时，清除上一帧到当前帧渲染完成中间出现的空白。
- 双缓存实现原理： 内容的绘制和替换都放在计算机内存中，绘制完成后再替换上一帧的内容，在计算期间不清除上一帧的内容。
- 双缓存原理的应用：FiberRoot的指针指向替换过程及其rootFiebr的更新就是双缓存原理的应用
应用fiber的渲染流程
如图，React用JSX描述页面，JSX经过babel编译为render function，执行后产生VDOM，VDOM不是直接渲染的，会先转换为fiber，再进行渲染。vdom转换为fiber的过程叫reconcile，转换过程会记录应该进行的dom操作，全部转换完成后会一次性commit到DOM，这个过程不是一次性的，而是可打断的，这就是fiber架构的渲染流程
