React的Reconciliation算法原理

image.png

流程

1、元素类型不相同时

直接将原VDOM树上的节点及其节点下所有的后代节点删除，然后替换为新VDOM树上同一位置的节点

2、元素类型相同时

如果是DOM节点，例如

<div className="old" title="老节点" />

<div className="new" title="新节点" />

通过比较React知道需要修改className属性和title属性

如果是组件，组件实例保持不变，更新 props。值得注意的是，这时候调用组件实例的 componentWillReceiveProps () 方法。然后通过 shouldComponentUpdate 返回值决定是否调用 render 方法

处理完该节点后，依然继续对子节点进行递归。

---来自https://juejin.cn/book/6844733816460804104