資訊專欄INFORMATION COLUMN
摘要：現代前端框架的使命就是開發者管理狀態，框架根據狀態自動生成。專題一覽什么是可變狀態不可變屬性生命周期組件事件操作抽象
本文是『horseshoe·React專題』系列文章之一，后續會有更多專題推出
來我的 GitHub repo 閱讀完整的專題文章
來我的 個人博客 獲得無與倫比的閱讀體驗
什么是UI？
如果你指的是布局和色彩，那更偏向于設計師的工作。
在現代web領域，大家已經有一個共識：UI是狀態的演進。
那么什么是狀態(state)？
現代網頁往往意味著大量的人機交互，每一次交互都會產生一些數據，這些數據或者放在內存中，網頁關閉即銷毀，或者發送給服務器永久保存。但無論怎么樣，這些數據都是前端要處理的。
帶有時間性的交互數據，就是狀態。
當頁面初始化完成，變化的只有狀態，所以我們才說UI是狀態的演進。
現代前端框架的使命就是：開發者管理狀態，框架根據狀態自動生成UI。
首先我們明確一點，狀態和UI是一一對應的。
只要狀態發生改變，就需要一套新的UI和它匹配。
這就引出了現代前端框架的核心：如何去監控應用的狀態？
AngularAngular的哲學是監控狀態發生改變的所有出口。
這種方式簡單粗暴。
如果發現商場里有在逃通緝犯，那就調動警力封鎖所有的出口，逃犯總不可能在商場里過日子。
而且Angular還驚喜的發現其實出口總共沒幾個。event回調，http回調，timer回調，promise回調，大概就這些了。
那么如何監控這些出口呢？
貍貓換太子，對這些任務做一層封裝，開發者調用的實際上是被Angular動過手腳的方法。剛剛說什么來著？相當暴力。大家應該都聽說過大名鼎鼎的zone.js吧，它就是Angular所謂臟檢查的基礎設施。
不過Angular已經日薄西山了。陡峭的學習曲線，臃腫的代碼庫，一代和二代的完全不兼容，注定它要被開發者拋棄。
VueVue的哲學是監控變量。
變量實際上是狀態的容器，無論狀態怎么變，最后都要裝到變量這個壇子里。
Vue也覺得調動警力實施封鎖實在是太粗暴了，現代社會的命脈是什么？是金融啊喂！
我只要監控逃犯的金融賬戶，就不怕他不消費。掌握他的行蹤，實施定點抓捕就可以了。
那么如何監控變量呢？
JavaScript底層有實現，通過Object.defineProperty接口的getter和setter，可以輕易監控變量的讀取和更新。當然ES6開放了更加強大的Reflect和Proxy接口。
具體操作呢，在初始化階段，Vue會把掛在UI上的變量都讀一遍，觸發getter，然后getter會為每個變量維護一個數組(因為一個變量可能被多次應用于UI)，變量以及對應的回調被綁在一起push進數組里。每次開發者更新變量的值就會觸發setter，setter的作用就是執行回調。當然，回調里就是更新UI的動作。
某種程度上說，Vue脫胎于Angular，它帶著Angular的遺志，將來是要和React決戰光明頂的。
Vue沒有讓人失望，現在已經是一枚當紅流量小生了。
ReactReact的哲學是監控DOM的鏡像。
人海茫茫抓捕逃犯成本不是高嘛，我們有監控攝像頭啊！無數的攝像頭基本可以拼湊出一個公共場所的副本，依靠這個副本，警方可以隨心所欲的對比、回放、分析，而不需要顧慮部署警力的成本。
React的思路非常奇特，既然框架負責自動更新UI，那UI就應該成為框架的一部分。
現在UI成了框架的畫板，開發者在畫板上自由作畫，階段性完工后再由React一次性掛到界面上。
這就帶來了一個問題：DOM是好惹的嗎？這么不尊重它，每次innerHTML了事？
React必須解決這個問題，而它的方案是抽象UI(一般稱為Virtual DOM)。
當我們說div是一個元素的時候，我們指的不是那個標簽，而是與之關聯的一個對象，這個對象描述了div的位置和功能，依據這個對象我們是可以復原出一個DOM節點出來的。
可React覺得這個對象還是太臃腫了，對象里只需要包含必要信息即可，于是React提取必要信息構建了一份DOM的鏡像。
什么是必要信息呢？對一個節點而言，它的標簽類型、屬性、子節點引用就是必要信息，無數節點確立其位置就形成了一個樹結構，這個樹結構和DOM是一一對應的。
當狀態更新的時候，React便獲得了兩份鏡像，通過對比這兩份鏡像，React就可以給UI打補丁，而不是完全覆蓋舊的UI了。
React做的事情特別純粹，你手里有一幅畫，你可以在畫上作任意更改，React的使命就是在合適的時機將你的更改生成一幅新的畫。
為什么是React如果說Angular手里握有足夠的警力，Vue手里握有金融命脈，那么React手里握有的是整個地圖，這他媽不是開掛了么！
當然，框架之間不能這樣簡單的去對比，但是對開發者而言，在React架構下，狀態的層次感變得異常清晰。
我們已經同意狀態是現代網頁的核心，也同意UI是狀態的演進，那么清晰的狀態層次感和開發者對UI足夠的掌控力(幻覺)，會給開發者一種莫名的秩序感，這種秩序感才是React備受開發者喜愛的根本原因吧(不接受異議)。
你看，我在畫板上作畫喲，真的是我在作畫喲。
除此之外，React真正的以組件為核心，HTML和CSS都納入到組件中來，也是它備受開發者喜愛的原因之一。
除此之外，React把UI抽象出來，理論上可以應用到任何界面，也是它備受開發者喜愛的原因之一。
除此之外，JSX的不倫不類，額...是開發者需要克服的心理障礙。
React專題一覽什么是UI
JSX
可變狀態
不可變屬性
生命周期
組件
事件
操作DOM
抽象UI
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108284.html
摘要：的參數既可以是一個對象，也可以是一個回調函數。回調函數提供了兩個參數，第一個參數就是計算過的對象，即便這時還沒有渲染，得到的依然是符合直覺的計算過的值。專題一覽什么是可變狀態不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專題』系列文章之一，后續會有更多專題推出來我的 GitHub repo 閱讀完整的專題文章來我的 個人博客 獲得無與倫比的閱讀體驗 Reac...
平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
閱讀 3730·2021-09-22 15:49
閱讀 3300·2021-09-08 09:35
閱讀 1422·2019-08-30 15:55
閱讀 2321·2019-08-30 15:44
閱讀 714·2019-08-29 16:59
閱讀 1597·2019-08-29 16:16
閱讀 479·2019-08-28 18:06
閱讀 890·2019-08-27 10:55
