1.9 KiB
1.9 KiB
课程总结
这门课咱们从零开始搭建了一个 mini 版的 react，并且实现了 react 中比较核心的几个功能：
-
调度器的实现
- Scheduler
- 最小堆的实现
-
Fiber 结构的创建
-
如何生成一颗 Fiber 树
- Fiber 子节点的协调
- diff 算法，核心 5 个步骤：
- 从左边往右边进行新节点（vnode）进行遍历，和旧节点（fiber）进行比较，如果可以复用则拿到复用，继续往右，不能复用就停止第一轮遍历
- 检查 newChildren（新节点 vnode 的数组）是否遍历完毕，如果遍历完了但是老节点还存在，那么需要将老节点删除掉
- 完全没有老节点，那么就是初次渲染，做和初次渲染相关的操作；还需要注意一种情况，老节点没有了，但是新节点还有剩余，那么对于这些剩余的新节点来讲，也是初次渲染
- 新老节点都还有剩余
- 把剩下的老节点构建到一张哈希表里面（ map 结构）
- 遍历剩余的新节点，通过新节点的 key 去哈希表里面查找节点，找到能够复用的，就拿来复用，并且删除哈希表中对应的已经复用了的节点
- 如果经历了上面的步骤之后，哈希表还有剩余，那么所剩余的节点也就没有用了，说明是无论如何都无法复用，那么直接删除即可
-
实现了一些很重要的方法
- scheduleCallback：负责将一个任务放到任务队列里面
- workloop：在浏览器渲染每一帧的时候，如果还有剩余时间，那么会执行
- performUnitOfWork：处理每一颗 fiber 对象
- beginWork
- completeWork
-
节点的提交
- 其核心就是根据 fiber 身上不同的 flags 来做不同的事情
-
基本的 Hooks 的实现
- useState
- useReducer
- useEffect
大家下去可以根据自己的兴趣，自行深挖 react 源码，完善我们的这个 mini 版的 react。记住！兴趣最重要！！