React系列之diff算法

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进行区分。

参考链接

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 木木放学的时候,太阳还在学校的楼顶上哈哈笑。明亮的阳光像燃烧的火焰,把楼房外墙烤得发烫,把柏油路烤得像平底锅一样发...
    长亭外的夏小乔阅读 4,881评论 105 109
  • 这是朋友是工作室教练总结出的内容,主要看思考过程,括号里面是我的点评。 客户因为颈部紧张两天几乎没睡觉了,提前了一...
    法帆阅读 1,747评论 0 0
  • 上周姐姐去打小学之前最后两针预防针,出发之前就说妈妈我可能会哭。果然打针时哭的稀里哗啦,妹妹在旁边和护士阿姨说:阿...
    一起妈妈阅读 1,504评论 0 0

友情链接更多精彩内容