摘要：現(xiàn)代前端框架的使命就是開發(fā)者管理狀態(tài)，框架根據(jù)狀態(tài)自動(dòng)生成。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象

本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出
來我的 GitHub repo 閱讀完整的專題文章
來我的 個(gè)人博客 獲得無與倫比的閱讀體驗(yàn)

什么是UI？

如果你指的是布局和色彩，那更偏向于設(shè)計(jì)師的工作。

在現(xiàn)代web領(lǐng)域，大家已經(jīng)有一個(gè)共識(shí)：UI是狀態(tài)的演進(jìn)。

那么什么是狀態(tài)(state)？

現(xiàn)代網(wǎng)頁往往意味著大量的人機(jī)交互，每一次交互都會(huì)產(chǎn)生一些數(shù)據(jù)，這些數(shù)據(jù)或者放在內(nèi)存中，網(wǎng)頁關(guān)閉即銷毀，或者發(fā)送給服務(wù)器永久保存。但無論怎么樣，這些數(shù)據(jù)都是前端要處理的。

帶有時(shí)間性的交互數(shù)據(jù)，就是狀態(tài)。

當(dāng)頁面初始化完成，變化的只有狀態(tài)，所以我們才說UI是狀態(tài)的演進(jìn)。

現(xiàn)代前端框架的使命就是：開發(fā)者管理狀態(tài)，框架根據(jù)狀態(tài)自動(dòng)生成UI。

首先我們明確一點(diǎn)，狀態(tài)和UI是一一對(duì)應(yīng)的。

只要狀態(tài)發(fā)生改變，就需要一套新的UI和它匹配。

這就引出了現(xiàn)代前端框架的核心：如何去監(jiān)控應(yīng)用的狀態(tài)？

Angular的哲學(xué)是監(jiān)控狀態(tài)發(fā)生改變的所有出口。

這種方式簡(jiǎn)單粗暴。

如果發(fā)現(xiàn)商場(chǎng)里有在逃通緝犯，那就調(diào)動(dòng)警力封鎖所有的出口，逃犯總不可能在商場(chǎng)里過日子。

而且Angular還驚喜的發(fā)現(xiàn)其實(shí)出口總共沒幾個(gè)。event回調(diào)，http回調(diào)，timer回調(diào)，promise回調(diào)，大概就這些了。

那么如何監(jiān)控這些出口呢？

貍貓換太子，對(duì)這些任務(wù)做一層封裝，開發(fā)者調(diào)用的實(shí)際上是被Angular動(dòng)過手腳的方法。剛剛說什么來著？相當(dāng)暴力。大家應(yīng)該都聽說過大名鼎鼎的zone.js吧，它就是Angular所謂臟檢查的基礎(chǔ)設(shè)施。

不過Angular已經(jīng)日薄西山了。陡峭的學(xué)習(xí)曲線，臃腫的代碼庫，一代和二代的完全不兼容，注定它要被開發(fā)者拋棄。

Vue的哲學(xué)是監(jiān)控變量。

變量實(shí)際上是狀態(tài)的容器，無論狀態(tài)怎么變，最后都要裝到變量這個(gè)壇子里。

Vue也覺得調(diào)動(dòng)警力實(shí)施封鎖實(shí)在是太粗暴了，現(xiàn)代社會(huì)的命脈是什么？是金融啊喂！

我只要監(jiān)控逃犯的金融賬戶，就不怕他不消費(fèi)。掌握他的行蹤，實(shí)施定點(diǎn)抓捕就可以了。

那么如何監(jiān)控變量呢？

JavaScript底層有實(shí)現(xiàn)，通過Object.defineProperty接口的getter和setter，可以輕易監(jiān)控變量的讀取和更新。當(dāng)然ES6開放了更加強(qiáng)大的Reflect和Proxy接口。

具體操作呢，在初始化階段，Vue會(huì)把掛在UI上的變量都讀一遍，觸發(fā)getter，然后getter會(huì)為每個(gè)變量維護(hù)一個(gè)數(shù)組(因?yàn)橐粋€(gè)變量可能被多次應(yīng)用于UI)，變量以及對(duì)應(yīng)的回調(diào)被綁在一起push進(jìn)數(shù)組里。每次開發(fā)者更新變量的值就會(huì)觸發(fā)setter，setter的作用就是執(zhí)行回調(diào)。當(dāng)然，回調(diào)里就是更新UI的動(dòng)作。

某種程度上說，Vue脫胎于Angular，它帶著Angular的遺志，將來是要和React決戰(zhàn)光明頂?shù)摹?/p>

Vue沒有讓人失望，現(xiàn)在已經(jīng)是一枚當(dāng)紅流量小生了。

React的哲學(xué)是監(jiān)控DOM的鏡像。

人海茫茫抓捕逃犯成本不是高嘛，我們有監(jiān)控?cái)z像頭??！無數(shù)的攝像頭基本可以拼湊出一個(gè)公共場(chǎng)所的副本，依靠這個(gè)副本，警方可以隨心所欲的對(duì)比、回放、分析，而不需要顧慮部署警力的成本。

React的思路非常奇特，既然框架負(fù)責(zé)自動(dòng)更新UI，那UI就應(yīng)該成為框架的一部分。

現(xiàn)在UI成了框架的畫板，開發(fā)者在畫板上自由作畫，階段性完工后再由React一次性掛到界面上。

這就帶來了一個(gè)問題：DOM是好惹的嗎？這么不尊重它，每次innerHTML了事？

React必須解決這個(gè)問題，而它的方案是抽象UI(一般稱為Virtual DOM)。

當(dāng)我們說div是一個(gè)元素的時(shí)候，我們指的不是那個(gè)標(biāo)簽，而是與之關(guān)聯(lián)的一個(gè)對(duì)象，這個(gè)對(duì)象描述了div的位置和功能，依據(jù)這個(gè)對(duì)象我們是可以復(fù)原出一個(gè)DOM節(jié)點(diǎn)出來的。

可React覺得這個(gè)對(duì)象還是太臃腫了，對(duì)象里只需要包含必要信息即可，于是React提取必要信息構(gòu)建了一份DOM的鏡像。

什么是必要信息呢？對(duì)一個(gè)節(jié)點(diǎn)而言，它的標(biāo)簽類型、屬性、子節(jié)點(diǎn)引用就是必要信息，無數(shù)節(jié)點(diǎn)確立其位置就形成了一個(gè)樹結(jié)構(gòu)，這個(gè)樹結(jié)構(gòu)和DOM是一一對(duì)應(yīng)的。

當(dāng)狀態(tài)更新的時(shí)候，React便獲得了兩份鏡像，通過對(duì)比這兩份鏡像，React就可以給UI打補(bǔ)丁，而不是完全覆蓋舊的UI了。

React做的事情特別純粹，你手里有一幅畫，你可以在畫上作任意更改，React的使命就是在合適的時(shí)機(jī)將你的更改生成一幅新的畫。

如果說Angular手里握有足夠的警力，Vue手里握有金融命脈，那么React手里握有的是整個(gè)地圖，這他媽不是開掛了么！

當(dāng)然，框架之間不能這樣簡(jiǎn)單的去對(duì)比，但是對(duì)開發(fā)者而言，在React架構(gòu)下，狀態(tài)的層次感變得異常清晰。

我們已經(jīng)同意狀態(tài)是現(xiàn)代網(wǎng)頁的核心，也同意UI是狀態(tài)的演進(jìn)，那么清晰的狀態(tài)層次感和開發(fā)者對(duì)UI足夠的掌控力(幻覺)，會(huì)給開發(fā)者一種莫名的秩序感，這種秩序感才是React備受開發(fā)者喜愛的根本原因吧(不接受異議)。

你看，我在畫板上作畫喲，真的是我在作畫喲。

除此之外，React真正的以組件為核心，HTML和CSS都納入到組件中來，也是它備受開發(fā)者喜愛的原因之一。

除此之外，React把UI抽象出來，理論上可以應(yīng)用到任何界面，也是它備受開發(fā)者喜愛的原因之一。

除此之外，JSX的不倫不類，額...是開發(fā)者需要克服的心理障礙。

React專題一覽
什么是UI
JSX
可變狀態(tài)
不可變屬性
生命周期
組件
事件
操作DOM
抽象UI