mini-react - 实现fiber架构

Fiber架构是一种软件架构，主要用于构建和运行Web应用程序 。它由Facebook开发，是一种基于JavaScript的框架。Fiber架构的核心思想是通过将应用程序逻辑划分为多个小单元（称为"Fiber"），然后在不同的线程或事件循环中执行这些单元，从而提高应用程序的性能和响应速度。

在Fiber架构中，每个Fiber代表一个工作单元，可能是一个组件、一个函数或者是一个异步任务。Fiber通过一个调度器来管理这些工作单元的执行。调度器会根据优先级和依赖关系来安排Fiber的执行顺序。当一个Fiber执行完成后，它会被放入一个队列中，等待下一次执行。

Fiber架构的优势在于它可以充分利用现代硬件的多核特性，通过在不同的线程或事件循环中执行不同的Fiber，从而提高应用程序的并发性和性能。同时，Fiber架构还提供了更好的错误处理和调试支持，因为它可以轻松地跟踪和调试每个Fiber的执行过程。

任务调度器把大任务拆分到多个task里面完成，来解决dom树太多一次性加载导致的性能问题。

问题：

如何做到每次只渲染少数几个节点？

在下次执行的时候依然从之前的位置执行？

如何控制树的渲染

以上两个问题可以总结为，我们应该如何控制这颗树的渲染？ok, 我们的想法是：

现在分Task来进行，当一个Task渲染完了，如果还有空闲时间，则会继续下一个；这种一次进行处理的结构可以采用链表结构 。所以现在首先需要做的是，如何将这颗树转化为一个链表结构？ 要将这颗树转化为一个链表结构，首先需要知道遍历规则，先遍历谁，接下来又是谁，所以首先需要构建遍历规则。

我们采用"一边构建链表关系，一边渲染dom"

如何控制树的渲染

构建遍历规则

遍历规则从根节点开始，从左到右，每次只构建当前节点和它的孩子节点之间关系

遍历顺序如下：

从root节点开始，找它的子节点，然后是兄弟节点；如果没有兄弟节点就找叔叔节点，知道既没有兄弟节点，也没有叔叔节点就表示遍历完成，形成了一个链表；

结合任务调度器实现执行逻辑

/**
  * 1. 创建dom
  * 2. 处理props
  * 3. 转换链表，设置指针
  * 4. 返回下一个要执行的指针
 */

// 记录下一次任务
let nextWorkOFUnit = false
function workLoop(dleDeadline){
  // 状态 - 表示是否有空闲时间
  let shouldYield = false
  // nextWorkOFUnit 有任务的时候才去执行
  while(!shouldYield && nextWorkOFUnit){
    nextWorkOFUnit = preformWorkOfUnit(nextWorkOFUnit)
    shouldYield = dleDeadline.timeRemaining() < 1
  }
  requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop)

//实现preformWorkOfUnit

function preformWorkOfUnit(work){
  // 1. 创建dom
  // 如果 work 上本身就有了dom,那么就无需去创建处理
  if(!work.dom){
    const dom = (work.dom = work.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(work.type))

    // 需要将当前的dom 挂载到父节点上
    work.parent.dom.append(dom)

    // 2.处理props
    Object.keys(work.props).forEach(key => {
      if (key !== "children") {
        dom[key] = el.props[key]
      }
    })
  }

  // 3. 转换链表，设置指针
  const childrens = work.props.children
  let prevChild = null
  childrens.forEach((child,index)=>{
    // 因为有挂载 child 和 sibling 那么虚拟dom必然没有这两个属性，不能去破坏虚拟dom的结构
    const newWork = {
      type: child.type,
      props: child.props,
      child: null,
      parent: work,
      sibling: null,
      dom: null
    }
    // 先取第一个子节点 挂载到当前执行任务的子节点上
    if(index === 0){
      work.child = newWork
    }else{
      // 否则就是兄弟节点
      prevChild.sibling = newWork
    }
    prevChild = newWork
  })

  // 4. 返回下一个要执行的指针
  if(work.child){
    return  work.child
  }
  // 然后检查是否有兄弟节点
  if(work.sibling) {
    return work.sibling
  }
  // 如果没有,那么就找到parent ，然后去找叔叔节点
  return work.parent?.sibling
}

github.com/HolinWang/m...