React中render方法返回的并不是真实的DOM,而是一个轻量级的JS对象,Virtual DOM。React根据这个Virtual DOM计算出更新UI所需要的最少的DOM操作。
传统的diff算法
传统的diff算法通过循环递归对节点依次进行对比,效率低下,算法复杂度高达O(n^3), 其中n是树节点的总数。
React diff
React通过制定大胆的策略,将O(n^3)复杂度的问题转换成O(n)复杂度的问题
-
React 策略
1)Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。
2)拥有相同类的两个组件将会生成相似的DOM结构,拥有不同类的两个组件将会生成不同的DOM结构。
3)同一层级的一组子节点,可以通过唯一的id进行区分。