react diff 原理

作者:王少飞

React diff 作为 Virtual DOM 的加速器,其算法上的改进优化是 React 整个界面渲染的基础,以及性能提高的保障,同时也是 React 源码中最神秘、最不可思议的部分,本文将剖析 React diff 的不可思议之处。

React 中最值得称道的部分莫过于 Virtual DOM 与 diff 的完美结合,特别是其高效的 diff 算法,让用户可以无需顾忌性能问题而”任性自由”的刷新页面,让开发者也可以无需关心 Virtual DOM 背后的运作原理,因为 React diff 会帮助我们计算出 Virtual DOM 中真正变化的部分,并只针对该部分进行实际 DOM 操作,而非重新渲染整个页面,从而保证了每次操作更新后页面的高效渲染,因此 Virtual DOM 与 diff 是保证 React 性能口碑的幕后推手。

diff 策略

1、Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计。

2、拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构。

3、对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。

以上三个策略,React 分别对 tree diff、component diff 以及 element diff 进行算法优化,事实也证明这三个前提策略是合理且准确的,它保证了整体界面构建的性能。

tree diff

基于策略一,React 对树的算法进行了简洁明了的优化,即对树进行分层比较,两棵树只会对同一层次的节点进行比较。

既然 DOM 节点跨层级的移动操作少到可以忽略不计,针对这一现象,React 通过 updateDepth 对 Virtual DOM 树进行层级控制,只会对相同颜色方框内的 DOM 节点进行比较,即同一个父节点下的所有子节点。当发现节点已经不存在,则该节点及其子节点会被完全删除掉,不会用于进一步的比较。这样只需要对树进行一次遍历,便能完成整个 DOM 树的比较。

如果出现 dom 节点跨层级的移动操作,因为该节点已经不在原来的 dom 树层, 所以会直接删除该节点,在移动后的 dom 层重建该节点, 可见这种操作的性能代价非常大,所以不推荐这样做。 可以通过 css 样式控制节点的隐藏和显示来代替节点跨层级移动的操作。

component diff

React 是基于组件构建应用的,对于组件间的比较所采取的策略也是简洁高效。

如果是同一类型的组件,按照原策略继续比较 virtual DOM tree。

如果不是,则将该组件判断为 dirty component,从而替换整个组件下的所有子节点。

对于同一类型的组件,有可能其 Virtual DOM 没有任何变化,如果能够确切的知道这点那可以节省大量的 diff 运算时间,因此 React 允许用户通过 shouldComponentUpdate() 来判断该组件是否需要进行 diff。

如下图,当 component D 改变为 component G 时,即使这两个 component 结构相似,一旦 React 判断 D 和 G 是不同类型的组件,就不会比较二者的结构,而是直接删除 component D,重新创建 component G 以及其子节点。虽然当两个 component 是不同类型但结构相似时,React diff 会影响性能,但正如 React 官方博客所言:不同类型的 component 是很少存在相似 DOM tree 的机会,因此这种极端因素很难在实现开发过程中造成重大影响的。

element diff

当节点处于同一层级时,React diff 提供了三种节点操作,分别为:INSERT_MARKUP(插入)、MOVE_EXISTING(移动)和 REMOVE_NODE(删除)。

  • INSERT_MARKUP,新的 component 类型不在老集合里, 即是全新的节点,需要对新节点执行插入操作。
  • MOVE_EXISTING,在老集合有新 component 类型,且 element 是可更新的类型,generateComponentChildren 已调用 receiveComponent,这种情况下 prevChild=nextChild,就需要做移动操作,可以复用以前的 DOM 节点。
  • REMOVE_NODE,老 component 类型,在新集合里也有,但对应的 element 不同则不能直接复用和更新,需要执行删除操作,或者老 component 不在新集合里的,也需要执行删除操作。

开发者对同一层级的子节点,可以添加唯一索引进行区分,这样在 diff 时,涉及到只是位置变化的,可以只移动元素,避免删除创建等重复的操作。

参考资料

https://zhuanlan.zhihu.com/p/20346379

原文链接:http://ivweb.io/topic/579e33d693d9938132cc8d94

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据架构师专家

Linux 进程管理之四大名捕

四大名捕,最初出现于温瑞安创作的武侠小说,是朝廷中正义力量诸葛小花的四大徒弟,四人各怀绝技,分别是轻功暗器高手“无情”、内功卓越的高手“铁手”、腿功惊人的“追命...

582
来自专栏北京马哥教育

SQLAlchemy基本使用

云豆贴心提醒,本文阅读时间6分钟,文末有秘密! ORM介绍 ORM(Object-Relational Mapping) 架构,采用元数据来描述对象-关系映射...

3677
来自专栏公有云大数据平台弹性MapReduce

浅谈Hadoop Distcp工具的InputFormat

从Hadoop的出现到现在已经超过十年了,它在大数据领域扮演着一个重要的角色,相信在Hadoop的使用过程中,或多或少的都会用到自带的一个常用工具,就是Hado...

892
来自专栏向治洪

Google V8 引擎

V8的前世今生 V8是JavaScript渲染引擎,第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前,相比...

3695
来自专栏PhpZendo

什么是依赖注入

本文是依赖注入(Depeendency Injection)系列教程的第一篇文章,本系列教程主要讲解如何使用 PHP 实现一个轻量级服务容器,教程包括:

481
来自专栏企鹅号快讯

如何在不会导致服务器宕机的情况下,用 PHP 读取大文件

英文:Christopher Pitt ,译文:oschina www.oschina.net/translate/performant-reading-big...

1809
来自专栏向治洪

Google V8引擎

V8的前世今生 V8是JavaScript渲染引擎,第一个版本随着Chrome的发布而发布(具体时间为2008年9月2日)。在运行JavaScript之前,相比...

2735
来自专栏纯洁的微笑

分布式爬虫系统设计、实现与实战:爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储

1233
来自专栏我杨某人的青春满是悔恨

封装一个 Swift-Style 的网络模块

Swift 跟 OC 有着完全不同的设计哲学,它鼓励你使用 protocol 而不是 super class,使用 enum 和 struct 而不是 clas...

593
来自专栏不想当开发的产品不是好测试

#测试框架推荐# test4j,数据库测试

# 背景 后端都是操作DB的,这块的自动化测试校验的话,是需要数据库操作的,当然可以直接封装方法来操作数据,那么有没有开源框架支持数据操作,让我们关注写sql语...

50212

扫码关注云+社区