这门课咱们从零开始搭建了一个 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。记住!兴趣最重要!!