摘要：對此沒有任何限制，它不關(guān)心這個(gè)。一種控制變化的辦法是不可改變的，持久化的數(shù)據(jù)結(jié)構(gòu)。總結(jié)檢測變化時(shí)開發(fā)中的核心問題，而框架們以各種方式解決這個(gè)問題。因?yàn)榻M件內(nèi)的變化是不被允許的。

我不知道什么更新了，所以當(dāng)更新的時(shí)候，我只能檢查所有的東西。

AngularJS 類似于 Ember，當(dāng)狀態(tài)改變的時(shí)候，必須人工去處理。但不同的是，AngularJS 從不同的角度來解決問題。

當(dāng)你在 Angular 模板中引用你的數(shù)據(jù)，例如這樣的語句 {{foo.x}} ，Angular 不僅僅只是渲染數(shù)據(jù)，而且會這個(gè)特定的數(shù)據(jù)創(chuàng)建一個(gè)觀察者。如此，只要你的應(yīng)用中發(fā)生任何變化，Angular 都會檢查這個(gè)觀察者檢視著的數(shù)據(jù)是否發(fā)生了改變。如果發(fā)生了改變，就會重新渲染這個(gè)數(shù)據(jù)對應(yīng)的用戶界面。這個(gè)過程稱作臟檢查（Dirty Checking）。

這種監(jiān)聽改變的風(fēng)格最大的好處就是，你可以在你的數(shù)據(jù)模型中使用任何姿勢。Angular 對此沒有任何限制，它不關(guān)心這個(gè)。沒有基礎(chǔ)的對象需要擴(kuò)展，也沒有 API 需要調(diào)用。

但壞處就是現(xiàn)在數(shù)據(jù)模型沒有任何內(nèi)建的檢測手段告訴告訴框架哪些東西發(fā)生了改變，框架對是否或者哪里發(fā)生了改變沒有任何洞察力。這意味著數(shù)據(jù)模型需要通過外部來監(jiān)聽改變，而 Angular 就是這樣子做的：所有觀察者在任何時(shí)間發(fā)生的任何改變，都需要被執(zhí)行一次。點(diǎn)擊事件，HTTP 響應(yīng)，timeout 方法的觸發(fā)，對于這些，觀察者都需要執(zhí)行一遍。

經(jīng)常去執(zhí)行所有觀察者，這聽起來像是性能的噩夢，但是它令人驚訝的快。這主要是因?yàn)樵跈z查到任何改變之前，沒有 DOM 的操作過程，而原生的 JavaScript 引用對象的檢查平均消耗的性能是廉價(jià)的。但是當(dāng)你要處理大量的 UI 或者經(jīng)常性觸發(fā)重新渲染，那么額外的性能優(yōu)化手段就變得很有必要了。

Ember 和 Angular 都即將得益于即將到來的標(biāo)準(zhǔn)：ECMAScript7 的 Object.observe 功能，很適合 Angular。它提供了原生的 API 給你用來監(jiān)聽對象屬性的變化。盡管這樣，Angular 不需要支持所有的用例，因?yàn)?Angular 的觀察者相對于簡單的監(jiān)聽對象屬性，可以做到的更好。

即將到來的 Angular 2 在檢測改變這件事上帶來了很多有趣的更新，最近 Victor Savkin 的一篇文章有介紹到。

關(guān)于這個(gè)主題，也可以看：Victor"s ng-conf talk

我不知道到底哪些發(fā)生了變化，所以我只能重新渲染所有東西，然后看一下有哪些不同。

React 有很多有趣的特性，但是我們討論的最有趣的特性是虛擬 DOM。

像 Angular 一樣，React 不會對數(shù)據(jù)模型進(jìn)行限制，而是讓你使用你認(rèn)為合適的任何對象和數(shù)據(jù)結(jié)構(gòu)。那么，它是如何在存在改變的情況下使 UI 保持最新呢？

React 所做的是有效的把我們帶回服務(wù)器渲染時(shí)代，當(dāng)時(shí)我們還不關(guān)心狀態(tài)變化：每當(dāng)某處發(fā)生改變的時(shí)候，它會從頭重新渲染整個(gè) UI。這可以顯著的簡化 UI 的代碼。大部分情況，你不會關(guān)心如何在 React 中維護(hù)狀態(tài)。就像服務(wù)器渲染一樣，渲染一次就算了。當(dāng)組件需要變更時(shí)，它只能再次重新渲染。組價(jià)的初始化渲染和更細(xì)它的數(shù)據(jù)之間，沒有任何區(qū)別。

如果故事就這么結(jié)束的話，它看起來的確非常低效。然而，React 在重新渲染方面，有點(diǎn)特殊。

當(dāng) React 進(jìn)行重新渲染時(shí)，它首先會渲染到虛擬 DOM 中，這不是一個(gè)實(shí)際的 DOM 對象的圖。而是一個(gè)輕量級的，有純粹的 object 和 array 組成的純 JavaScript 的數(shù)據(jù)結(jié)構(gòu)，它代表著一個(gè)真實(shí)的 DOM 對象的圖。

然后，一個(gè)獨(dú)立的進(jìn)程會根據(jù)虛擬 DOM 的結(jié)構(gòu)來創(chuàng)建那些在屏幕上顯示的真實(shí)的 DOM 元素。

之后，當(dāng)變化發(fā)生的時(shí)候，一個(gè)新的虛擬 DOM 會被從頭到尾創(chuàng)建出來。這個(gè)新的虛擬 DOM 將映射出數(shù)據(jù)模型的新的狀態(tài)。現(xiàn)在 React 在手上有兩個(gè)虛擬 DOM：一個(gè)新的，一個(gè)舊的。然后會對兩個(gè)虛擬 DOM 進(jìn)行一個(gè)對比算法，得出它們之間的一組變化。有且只有這些更改會被應(yīng)用到真實(shí) DOM 中：此元素已添加，此屬性以改變，等等。

所以 React 起碼至少有一個(gè)好處，就是你不用追蹤變化了。你只需要每次重新渲染整個(gè) UI ，然后無論改變了什么最終都會得到相應(yīng)的結(jié)果。React 的虛擬 DOM 對比算法，能讓你做到這一點(diǎn)，并且最大限度的節(jié)省昂貴的 DOM 操作。

我確切的知道哪些沒有改變。

雖然 React 的虛擬 DOM 相當(dāng)?shù)膲K，但是當(dāng)你的 UI 非常龐大或者經(jīng)常性渲染的時(shí)候（例如：每秒高達(dá) 60 次），它依然會面臨瓶頸。

問題在于，真的沒辦法每次都渲染出整個(gè)虛擬 DOM，除非你引入一些方法來控制數(shù)據(jù)模型的改變，就像 Ember 做的一樣。

一種控制變化的辦法是 不可改變的，持久化的數(shù)據(jù)結(jié)構(gòu)。這些看起來似乎很適合使用在 React 的虛擬 DOM 中，正如 David Nolen 在 Om 庫中所做的 工作 那樣，一個(gè)構(gòu)建于 React 和 ClojureScript 之上的庫。

有一點(diǎn)關(guān)于不可改變數(shù)據(jù)結(jié)構(gòu)的是，顧名思義，你永遠(yuǎn)不能改變它，只能產(chǎn)生新的版本。如果你想改變一個(gè)對象的屬性，你只能新建一個(gè)對象和屬性，因?yàn)槟悴荒芨淖円呀?jīng)存在的那一個(gè)。由于持久化數(shù)據(jù)結(jié)構(gòu)的工作方式，這比聽起來更加有效率。

這意味著在檢測變化方面，當(dāng) React 組件都只由不可變數(shù)據(jù)組成的時(shí)候，只有一個(gè)逃生窗口：當(dāng)你重新渲染一個(gè)組件時(shí)，組件的狀態(tài)仍然指向上次渲染時(shí)的相同數(shù)據(jù)結(jié)構(gòu)，你就可以跳過這次重新渲染。你可以使用該組件的先前的虛擬 DOM 以及源自該組件的整個(gè)組件樹。沒有必要進(jìn)一步挖掘，因?yàn)樵谶@個(gè)狀態(tài)中所有東西都不可能改變。

就像 Ember 一樣，像 Om 的這種庫不允許在你的數(shù)據(jù)中使用舊的 JavaScript 對象圖。你必須在不可變數(shù)據(jù)結(jié)構(gòu)中構(gòu)建你的數(shù)據(jù)模型，從而才能在其中得到好處。我會贊同這樣的做法，因?yàn)檫@一次你這樣做并不是為了取悅框架本身。你這樣做只是因?yàn)檫@是一個(gè)又簡單又好的方式去管理你的應(yīng)用狀態(tài)。使用不可變數(shù)據(jù)結(jié)構(gòu)的主要好處，并不是提升渲染性能，而是簡化你的應(yīng)用結(jié)構(gòu)。

雖然 Om 和 ClojureScript 已經(jīng)講 React 和不可變數(shù)據(jù)結(jié)構(gòu)融合起來，但是他們并不是圈子里面的唯一組合。而僅僅使用 React 和 Facebook 的 Immutable-js 是完全可能的。這個(gè)庫的作者 Lee Byron 在最近的一次 React.js 為主題的會議中進(jìn)行了一個(gè) 精彩的介紹。

同時(shí)我建議看一下 Rich Hickey"s 的 Persistent Data Structures And Managed References, 去了解狀態(tài)管理的方法。

我自己現(xiàn)在一直在為不可變數(shù)據(jù)數(shù)據(jù)結(jié)構(gòu) 寫詩，但我絕對沒有預(yù)見到它會進(jìn)入前端 UI 框架行列。它看起來似乎不遺余力的發(fā)生著，而 Angular 的人 正在為支持這個(gè)而努力著。

檢測變化時(shí) UI 開發(fā)中的核心問題，而 JavaScript 框架們以各種方式解決這個(gè)問題。

EmberJS 能在它們發(fā)生變化的時(shí)候檢測到，因?yàn)樗刂浦愕臄?shù)據(jù)模型 API，并且可以在你調(diào)用它的時(shí)候觸發(fā)事件。

Angular.js 是事后進(jìn)行檢測， 它通過重新運(yùn)行你已經(jīng)在 UI 中注冊的所有數(shù)據(jù)綁定，來檢測它們的值是否已經(jīng)發(fā)生變化。

React 的檢測方法是通過把整個(gè) UI 重新渲染成一個(gè)虛擬 DOM，然后和舊的版本進(jìn)行對比。無論改變了什么，都可以給真實(shí) DOM 打上個(gè)補(bǔ)丁。

React 和 不可變數(shù)據(jù)結(jié)構(gòu)的組合，對比純粹的 React 有所增強(qiáng)，通過快速的在組件樹中標(biāo)記不可變的節(jié)點(diǎn)。因?yàn)榻M件內(nèi)的變化是不被允許的。但是，這不是主要出于性能的原因，而是由于它對整個(gè)應(yīng)用程序體系結(jié)構(gòu)有積極的影響。

Changes and Its detection of JavaScript Framework