实现 mini-react 的学习总结

64 阅读1分钟

之前学过算法,二叉树的前中后序遍历,看这次代码的递归,一看就理解了,体会到学算法的用处了。

尝试遇到问题,把 fiber 打印出来看,在结合画fiber 树图,看数据就清晰明了。最近在工作中遇到逻辑比较复杂,流程繁琐的,画了个图,对照看,思路就来了,以后要多画画图。

期待下次崔哥带我们学测试课,虽然已经买了测试课,之前看了一段时间,实在没动力学下去,可能是学习方法不对。总之这次 mini-react 收获很多,群里还有这么多可爱好学的同学,很强的学习氛围,真的不错,群里很多同学提出问题,大家都热心的解答,这种学习方式太棒了。

遇到的问题:

App 组件结构如下:

Pasted image 20240120193131.png

浏览器效果:

Pasted image 20240120192804.png

点击按钮展示成:

Pasted image 20240120193211.png

原因:

新旧 fiber 的type 不一样,走的创建新的 fiber 逻辑,commitWork 时,parentFiber.dom.append(fiber.dom),append 是插入到父节点的末尾的。

解决方法:

采用 insertBefore方法,代码如下: Pasted image 20240120195306.png 初始化阶段,定义全局变量 isMounted =false,commitRoot 结束置为 true,fiber 上加一个 isMounted 属性,设置为 true。 Pasted image 20240120193918.png 更新阶段,isSameType 为 true,nextFiber.isMounted 从 oldFiber 上取。commitWork 时 去找锚点,插入到哪个已存在的元素前面。 可以结合下面 Fiber 树理解。 Pasted image 20240120194632.png