关于React的Fiber的一些理解和总结

1、原因：

react中的render()方法在更新的时候是进行递归操作的，如果在更新的过程中有大量的节点需要更新，就会出现长时间占用JS主线程，并且整个递归过程是无法被打断的，由于JS线程和GUI线程是互斥的，所以可能会看到UI的卡顿

2、实现Fiber架构时，必须要解决的两个问题：

a、保证任务在浏览器空闲的时候执行
b、将任务进行碎片化

requestIdleCallback

requestIdleCallback(callback)是实验性API，可以传入一个回调函数，回调函数能够收到一个deadline对象，通过该对象的timeRemaining()方法可以获取到当前浏览器的空闲时间，如果有空闲时间，那么就执行一小段任务，如果时间不足了，则继续requestIdleCallback，等到浏览器又有空闲时间的时候再接着执行。

链表结构

目前的虚拟DOM是树结构，当任务被打断后，树结构无法恢复之前的任务继续执行，所以需要一种新的数据结构，即链表，链表可以包含多个指针，可以轻易找到下一个节点，继而恢复任务的执行。Fiber采用的链表中包含三个指针，parent指向其父Fiber节点，child指向其子Fiber节点，sibling指向其兄弟Fiber节点。一个Fiber节点对应一个任务节点。
参考