365:為什么說Vue的響應式更新比React快

发布时间2020-04-07    点击数: 111   作者:365体育平台首页

而React在類似的場景下是自頂向下的進行遞歸更新的,也就是說,React中假如ChildComponent里還有十層嵌套子元素,那么所有層次都會遞歸的重新render(在不進行手動優化的情況下),這是性能上的災難。(因此,React創造了Fiber,創造了異步渲染,其實本質上是彌補被自己搞砸了的性能)。

他們能用收集依賴的這套體系嗎?不能,因為他們遵從Immutable的設計思想,永遠不在原對象上修改屬性,那么基于Object.defineProperty或Proxy的響應式依賴收集機制就無從下手了(你永遠返回一個新的對象,我哪知道你修改了舊對象的哪部分?)

同時,365体育平台首页由于沒有響應式的收集依賴,React只能遞歸的把所有子組件都重新render一遍(除了memo和shouldComponentUpdate這些優化手段),然后再通過diff算法決定要更新哪部分的視圖,這個遞歸的過程叫做reconciler,365体育平台首页聽起來很酷,但是性能很災難。

至此為止,是實現了對于_props上字段變更的劫持。也就是變成了響應式數據,后面我們做類似于_props.msg='Changed'的操作時(當然我們不會這樣做,Vue內部會做),就會觸發視圖更新。

其實,msg在傳給子組件的時候,會被保存在子組件實例的_props上,并且被定義成了響應式屬性,而子組件的模板中對于msg的訪問其實是被代理到_props.msg上去的,所以自然也能精確的收集到依賴,只要ChildComponent在模板里也讀取了這個屬性。

我們需要知道一個小知識點,vm.$forceUpdate本質上就是觸發了渲染watcher的重新執行,和你去修改一個響應式的屬性觸發更新的原理是一模一樣的,它只是幫你調用了vm._watcher.update()(只是提供給你了一個便捷的api,在設計模式中叫做門面模式)

'<div<span{{localMsg}}</span<button@click="change"click</button</div',


Copyright 2003 - 2002 365体育平台首页. All Rights Reserved 版权所有粤ICP11235728 地址:BENZCLOUD奔馳雲端 優質平價雲端服務