fiber架构粗谈

1. 我们知道js是一个单线程语言，遇到容易阻塞的任务，会影响到后续的页面渲染
2. 那么react是怎么来处理这些东西的呢，其实就 是依靠调度器来进行处理配合fiber架构。

为了能实现可中断的更新，采取了链表机制 从树结构转变为了链表，其实就是一个是转为线性结构能一次遍历处理所有节点，另一个是为了能够进行可中断，因为有指针所以可以找到下个执行的节点

主要由 child, sibiling,parent节点。

调度

1. 调度的目的就是为了去避免页面的一个阻塞，每次都是为了能够去查询当前浏览器当前空闲时间来判断，是否可执行当前的节点
2. 空闲阶段，执行fiber的构建，并每次都返回下一个节点。

demo代码

let performUntilNext = null;
const workLoop = (deadline) => {

  let shouldYield = false;
  while (!shouldYield) {
    performUntilNext = changeLink(performUntilNext)
    console.log('deadline', deadline.timeRemaining())
    shouldYield = deadline.timeRemaining() < 1;
  }

  requestIdleCallback(workLoop)
}

//树结构转为链表
  const children = fiber.props.children;
  let prevChild = null;
  children.forEach((child, index) => {
    const newFiber = {
      type: child.type,
      props: child.props,
      child: null,
      parent: fiber,
      sibling: null,
      dom: null,
    };

    if (index === 0) {
      fiber.child = newFiber;
    } else {
      prevChild.sibling = newFiber;
    }
    prevChild = newFiber;
  });
}