之前学过算法,二叉树的前中后序遍历,看这次代码的递归,一看就理解了,体会到学算法的用处了。
尝试遇到问题,把 fiber 打印出来看,在结合画fiber 树图,看数据就清晰明了。最近在工作中遇到逻辑比较复杂,流程繁琐的,画了个图,对照看,思路就来了,以后要多画画图。
期待下次崔哥带我们学测试课,虽然已经买了测试课,之前看了一段时间,实在没动力学下去,可能是学习方法不对。总之这次 mini-react 收获很多,群里还有这么多可爱好学的同学,很强的学习氛围,真的不错,群里很多同学提出问题,大家都热心的解答,这种学习方式太棒了。
遇到的问题:
App 组件结构如下:
浏览器效果:
点击按钮展示成:
原因:
新旧 fiber 的type 不一样,走的创建新的 fiber 逻辑,commitWork 时,parentFiber.dom.append(fiber.dom),append 是插入到父节点的末尾的。
解决方法:
采用 insertBefore方法,代码如下:
初始化阶段,定义全局变量 isMounted =false,commitRoot 结束置为 true,fiber 上加一个 isMounted 属性,设置为 true。
更新阶段,isSameType 为 true,nextFiber.isMounted 从 oldFiber 上取。commitWork 时
去找锚点,插入到哪个已存在的元素前面。
可以结合下面 Fiber 树理解。