React diff机制(比较虚拟DOM的机制)

申明

本文翻译此处,我只是搬运工。翻译不准的地方请参考原文
原文作者:Christopher Chedeau (@vjeux)

vjeux.jpg

正文

React是Facebook创造的构建用户界面的javascript框架。设计始终把性能放在心上。在这篇文章我将介绍diff机制以及React的render流程,这样我们就能自己优化app了

Diff机制

在开始我们的工作之前,我们先看看下面这个例子React是怎样工作的

var MyComponent = React.createClass({ 
render: function() { 
if (this.props.first) 
{ return <div className="first"><span>A Span</span></div>; } 
else { return <div className="second"><p>A Paragraph</p></div>; } 
} });

是你描述了你的UI,我们应该知道渲染的结果不是实际的DOM节点。他们只是很小的Javascript对象。我们称之为虚拟DOM。

React像这样找到从先前渲染到下一步渲染的最小步骤。举个例子:如果我们挂载<MyComponent first={true} />变为挂载<MyComponent first={false} />,最后再不挂载它,DOM结构将像这样变化:

第一步

  • 创建节点<div className="first"><span>A Span</span></div>

第一步到第二部

  • 把属性className="first"替换为className="second"
  • 把节点<span>A Span</span>替换为<p>A Paragraph</p>

最后
删除节点:<div className="second"><p>A Paragraph</p></div>

一级一级对应

(英文为Level by Level,应该是比较虚拟Dom树的时候是一级一级对应)
找寻两个任意树结构之间最小的变动是个 O(n^3)问题,如你所想这显然不适用,React使用简单强大的启发式算法使其时间复杂度接近 O(n).
React只会尝试一级一级去比价树,这样能显著减少其复杂性而且这不是一个损失,因为在web里极少有组件被移到树中不同的级别去,他们通常在子级中横向移动。

级级比较

列表

假如我们有一个组件,里面有5个迭代,而我们要在下次在中间插入一个新组件。只有这些信息很难知道两个列表是如何对应的。
默认情况下,React将第一个列表的第一个组件,对应第二个列表的第二个组件,你可以提供key属性去帮助react知道该怎么对应。

有key与无key

组件

一个React app通常由很多组件组成一个大树,主要使用div。diff算法将只会比较有相同类的组件。
例如:如果我们把<Header>替换为<ExampleBlock>,React将会移除header接着创建example block。我们不必浪费我们宝贵的时间比较两个几乎没有相似性的组件。

不同class的组件直接替换

事件代理

把事件绑到dom节点很慢,消耗内存。而React采用更好的技术称之为“事件代理”。React走的更远,采用W3C兼容的事件系统。这意味着ie8的事件操作bugs已经成为过去。所有的事件在不同浏览器中是一致的。
让我们来讨论它是如何实施的。一个事件监听将会被绑在document的初始节点上。当事件触发时,浏览器会给我们触发事件的DOM节点。为了在DOM结构中传播事件,React并不在虚拟DOM中迭代。
取而代之的是,因为每个React组件都有唯一的id用来编码层次结构。我们可以通过简单的操作获得id的所有父本。通过在一个hash map中存储事件监听,我们发现它比直接在虚拟DOM中绑定要好。这里有一个例子表明一个事件是如何在虚拟DOM中传播的
// dispatchEvent('click', 'a.b.c', event) clickCaptureListeners['a'](event); clickCaptureListeners['a.b'](event); clickCaptureListeners['a.b.c'](event); clickBubbleListeners['a.b.c'](event); clickBubbleListeners['a.b'](event); clickBubbleListeners['a'](event);
(个人理解ickBubbleListeners即时事件的hash map,‘a’,‘a.b.c’即是每个组件的id)
浏览器为每个事件和事件监听创建一个事件对象。这样你可以得到事件对象的引用甚至可以改变它。然而这样也意味着大量的内存分配。React在启动时会分配一个对象池,当要创建一个事件对象时,就从那个对象池中重复利用,这样大大减少了垃圾回收操作。

渲染

Batching(没有合适词翻译。。。批量?)

任何时候只要你在一个组件中调用了setState,React将把这个组件标记为dirty(脏),在事件循环结束后,React将找到所有脏的组件并重新渲染它们。
就是说,每一次事件循环Dom都会跟新一下。这个特性是建造高性能app的关键,而且通常用javascript很难实现。在React中,你默认就有了这个特性。

脏值

子树渲染

setState调用时,组件会重新build其子虚拟DOM。如果你在根节点上调用setState,那么整个app都会重新渲染,所有的组件,即使它没有改变也会调用它的render方法。这听起来很低效,但实际中,它工作很好应为我们没有操作实际的DOM。
首先,我们谈论的是显示用户界面。应为屏幕空间是有限的,通常我们只会同时显示几百到上千个elements。Javascript有足够快的业务逻辑管理整个界面。
另一个很重要的是,当你写React代码时,不要一出现变化就在根节点上调用setState方法。你应该在接收变化事件的组件或其上面的组件上调用setState,你应该极少的在上层中调。这意味着变化只会在用户交互的地方。

子树渲染
有选择的子树渲染

最后,你可以通过下面的方法选择阻止子树的渲染:
boolean shouldComponentUpdate(object nextProps, object nextState)

通过判断先前组件和下一个组件的属性/状态,你能够告诉React这个组件是否需要重新渲染。当合适的处理这将会显著提高性能。
为了使用它,你必须能比较对象的差异,这里就牵扯到一些问题,如是否应该深度比较,如果深度比较,我么是否应该固定数据的结构,或是做深度拷贝。
而且你应该记住,这个函数总会被调用,所以你要确保自己写的函数的调用时间要比默认的启发式比较的时间少。

选择性渲染

结论

使React快的技术不是新的。我们很早就知道直接操作DOM很费时,你必须将写操作,读操作,和事件代理批量处理,这样更快。。。
人们依旧在谈论它们,因为在实际中实施很困难。是什么是React脱颖而出,就是因为这些优化是默认实施的,这使你不必搬起石头砸自己的脚,不会使app运行的很慢。
React性能成本模型也很好理解:每次setState都会重新渲染子树。如果你想提高性能,就尽量在低层次结构中调用setState或者使用shouldComponentUpdate去阻止渲染很大的子树。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容