React源码解析之Commit第二子阶段「mutation」(下)

前端

2023-11-26 19:40:26

我们还是只考虑HostComponent和ClassCpmonent的情况，该方法也是一个深度优先遍历的算法逻辑，所以你必须知道该算法逻辑，才能看得懂while (true) { }里面做了什么。

重点剖析

当第一个参数domNode是DOM节点时，那么还需进行如下步骤：

首先我们判断currentDom和prevDom是否相等，如果不相等则说明DOM被替换了，此时需要删除currentDom，而从prevDom创建真实DOM并插入，而且需要注意的是当真实DOM创建并插入到container节点后，这个时候还要去变更prevProps到newProps。
还有就是修改和更新属性，这和setState触发更新时候所做的其实是一致的，因为不管你props发生了什么样的变化都会调用Reconciler进行更新，只不过这一次修改DOM属性是通过cloneNode方法。
如果DOM的差异只有属性的变化，比如说改变了元素的class值，或者元素的type值，这种情况下是不会重新创建DOM元素，而是会直接修改真实DOM元素的属性，这个过程就是使用ReactDOM的setAttribute方法，如果在白屏过程中此时还没有DOM则会采用第一条DOM节点被替换时候的处理方法。
比较简单的情况就是prevProps和newProps相等，这种情况下什么都不用做，只用负责fiber.updateQueue里的副作用执行完毕即可。
接下来就是上面的步骤完成后，当新旧的props都相等的时候，dom不会被替换，也不需要更新属性，只需要执行对应的副作用函数即可，如果此时fiber.updateQueue里没有副作用函数，那么这个时候更新就结束了，接下来会处理下一阶段的更新fiber了。而如果有副作用函数，则会将这个函数放入队列中。
最后需要注意的是，组件阶段(类组件ClassCpmonent)的Commit都会有DOM操作，不过类型只有两种，分别是添加新节点和删除旧节点，并不存在更新和修改。

以上我们在创建过程中所涉及到的很多操作都可以在React的源码里找到对应的处理逻辑，在这里也不细细说明，只要我们知道处理逻辑在哪里，后期如果需要自行去源码找的话，其实就会发现源码很好懂了。