【react】fiber简明教程

1.requestIdleCallback

requestIdleCallback(workLoop);

这是浏览器给出的一个新API

requestIdleCallback接收一个回调，这个回调会在浏览器空闲时调用，每次调用会传入一个 deadline，可以拿到当前还空余多久可以左自己的事情

然后我们就可以在这个空余时间去遍历自己的fiber tree

2.fiber tree

整体是个链表

我们假设有这样一个元素树
链表生成的过程是：

1. root的child设置为div
2. 然后在div的找它的child(将找到的children里的第一个 h1设置为div的child)
3. 然后h1找它的child，也就是p
4. 一直从上往下找到底
5. 然后从底开始找p的兄弟a
6. a再找它的兄弟
7. 如果a没有兄弟,回到父节点找h1的兄弟
8. 一直找下去直到回到root

从上往下找child，从左到右从下往上的找兄弟
直到回到root
这时候返回的是一个fiber
但是这个fiber是链表的头
它联系着所有fiber
这样就可以把得到的fiber tree
拿去渲染节点了

实例：

qcact