课程总结

这门课咱们从零开始搭建了一个 mini 版的 react，并且实现了 react 中比较核心的几个功能：

• 调度器的实现

  • Scheduler
  • 最小堆的实现

• Fiber 结构的创建

• 如何生成一颗 Fiber 树

  • Fiber 子节点的协调
  • diff 算法，核心 5 个步骤：
  1. 从左边往右边进行新节点（vnode）进行遍历，和旧节点（fiber）进行比较，如果可以复用则拿到复用，继续往右，不能复用就停止第一轮遍历
  2. 检查 newChildren（新节点 vnode 的数组）是否遍历完毕，如果遍历完了但是老节点还存在，那么需要将老节点删除掉
  3. 完全没有老节点，那么就是初次渲染，做和初次渲染相关的操作；还需要注意一种情况，老节点没有了，但是新节点还有剩余，那么对于这些剩余的新节点来讲，也是初次渲染
  4. 新老节点都还有剩余
     • 把剩下的老节点构建到一张哈希表里面（ map 结构）
     • 遍历剩余的新节点，通过新节点的 key 去哈希表里面查找节点，找到能够复用的，就拿来复用，并且删除哈希表中对应的已经复用了的节点
  5. 如果经历了上面的步骤之后，哈希表还有剩余，那么所剩余的节点也就没有用了，说明是无论如何都无法复用，那么直接删除即可

• 实现了一些很重要的方法

  • scheduleCallback：负责将一个任务放到任务队列里面
  • workloop：在浏览器渲染每一帧的时候，如果还有剩余时间，那么会执行
  • performUnitOfWork：处理每一颗 fiber 对象
    • beginWork
    • completeWork

• 节点的提交

  • 其核心就是根据 fiber 身上不同的 flags 来做不同的事情

• 基本的 Hooks 的实现

  • useState
  • useReducer
  • useEffect

大家下去可以根据自己的兴趣，自行深挖 react 源码，完善我们的这个 mini 版的 react。记住！兴趣最重要！！