【react】fiber简明教程和react简写

147 阅读1分钟
1.requestIdleCallback

requestIdleCallback(workLoop);

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

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

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

2.fiber tree

整体是个链表

我们假设有这样一个元素树 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 拿去渲染节点了

实例react简写:

qcact