参考文档https://reactjs.org/docs/reconciliation.html
传统的diff算法https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf。为了用最少的操作,把一颗树结构转化成另外一颗树结构,使用了非常复杂的算法,复杂度达到了O(n^3),其中n为树的节点数。
与传统的diff算法相比,React使用的是一种复杂度为O(n)的diff算法,基于两点基本的假设:
1.Two elements of different types will produce different trees.
2.The developer can hint at which child elements may be stable across different renders with a key prop.
不同类型的DOM元素
<div>
<ComponentA />
</div>
----------------------------------
<span>
<ComponentA />
</span>
由于div和span是不同类型的DOM元素,React将重新渲染,原来的树结构将会被销毁,ComponentA也将被卸载,componentWillUnmount会被调用。新的ComponentA生成后,componentWillMount和componentDidMount将会被调用。
相同类型的DOM元素
<div className="class1">aaaa</div>
------------