經過框架設計理解React、Angular、Vue區別

前言

咱們已經經過學習掌握了vue.js這個漸進式的JavaScript 框架，而且大體知道了React、Angular和Vue的區別，那麼如何對這三個框架進行深層次的分析，更好地區分它們呢？咱們能夠從框架設計上入手試着分析它們。

什麼是框架

能夠參考我以前的文章關於基於框架搭建與佈局系統的思考

框架設計

1、職責範圍

職責範圍就是框架設計之初要考慮的範圍，是一手全包仍是隻封裝底層核心代碼？簡單說就是這個框架能夠爲你作多少事情

1.small scope（小職責範圍）

表明：React

（1）設計理念：

自底向上
只創建核心模型，而後圍繞核心模型創建生態系統

（2）優勢：

• 初始時須要理解的概念不多

初始只用掌握核心代碼

• 靈活
  由於框架/庫只提供了部分底層的原生實現，用戶能夠在框架基礎上構建任意複雜的系統
• 生態好

擁有強大的生態系統

• 維護成本小

（3）缺點：

• 學習成本大

1.一樣也是由於框架只提供了部分底層的原生實現，因此當咱們須要構建比較複雜的系統時，就須要用很是有限的、很是原始的一些東西，去構建一些複雜的想法。（如學習了React，還需鑽研Redux、HOC 高階組件、render、props、Hooks以及在 JS 中使用 CSS 的各類方式等等）
2.官方只提供基礎的文檔，其他須要本身去鑽研，須要自主學習能力

2.large scope（大職責範圍）

表明：Angular

（1）設計理念

自上而下
儘量考慮用戶可能會遇到的問題；當你嘗試解決一個問題時，你在框架內就能找到解決方案。

（2）優勢

• 框架與生態一致性

集中式的設計確保了它自己與其生態系統的。當你遇到一個具體問題的時候，你沒必要去找一些不一樣的解決方案，你只須要看看框架它讓你作什麼，最大的可能就是它（框架）對此已經有解決方案。

• 少許代碼解決最多見的問題

能夠經過構建抽象概念來解決最多見的問題，如只須要建一個路由、一個http請求數據就能實現基本功能。

（3）缺點

• 更高的學習門檻

對於初學者來講，若是沒有相似使用 Java 或者 C# 等語言經驗的話，而是僅僅只學過 HTML/CSS 以及 JavaScript 的話，當你看到 Angular 文檔的時候，你可能會很難吃透。

• 不靈活

若是框架內置的解決方案不知足當前需求，但卻沒有方法替換。
當你想嘗試更改底層想法時，它會影響到你項目中的每一個組件（牽一髮而動全身）。

3.progressive scope（漸進式框架）

表明：Vue

（1）設計理念

框架分層
容許以漸進的方式選擇特性。如須要路由、須要狀態管理就引入，不須要也不影響，按需取捨，既能開發全新應用，也能融合以前已開發應用

（2）優勢

• 下降了學習門檻

（3）缺點

做爲small scope 和 large scope的中間者，須要去權衡利弊

• 生態系統可能不會像小職責範圍那樣多樣化
• 維護負擔幾乎與大職責範圍相同

2、渲染機制

如何表達你的視圖層，框架如何處理代碼？如何將實際渲染東西展現到頁面上的？這就要考慮咱們的渲染機制。

1.原生DOM

原生DOM你們都熟悉，在這裏我就不過多說明了。

<div>
  <p class="framework-design">框架設計</p>
</div>

（1）優勢

• 易用性強

（2）缺點

在咱們對原生DOM進行操做時，會發現不少缺點

• 效率低
• 解析速度慢
• 內存佔用量高

2.JSX / VDOM（虛擬DOM）

經過框架來表現本身的UI結構

render() {
    return h(
        'div',
        null,
        h(
            'p',
            {  'class': 'framework-design' },
           '框架設計'
        )
    );
}

（1）優勢

• 經過JS實現UI層，具備 JavaScript 的完整表現力
• 將視圖層視爲數據，能夠對數據作任何操做
• 能夠渲染到任何目標，終端、PDF、Canvas、WebGL

（2）缺點

• VDOM 自己成本很高

即便你只有一個節點，也可能會觸發 這個VDOM 的 Diff 算法

3.templates（模板編譯）

經過模板來表現本身的UI結構

<template>
  <div>
    <p>{{ data.title }}</p>
    <p>{{ data.content }}</p>
  </div>
</template>

（1）優勢

• 更加直接的渲染指令，具備更好的原生性能

經過模板編譯符準確知道可變的dom節點

<div>
  <p>框架設計</p>
  <p>{{ message }}</p>
</div>

（2）缺點

• 受限於嚴格的模板語法，從而失去 JavaScript 的表達能力

3、狀態機制

1.髒檢查

髒數據：產生了變化的數據
髒檢查：找出髒數據，從新渲染視圖

那麼在何時進行髒檢查呢？檢查哪些元素呢？

下面以Angular爲例

什麼時候進行

Angular 會在可能觸發 UI 變動的時候進行髒檢查。例如經常使用的 ng-click。

檢查哪些元素

Angular 會對全部綁定到 UI 上的表達式作髒檢查。在Angular程序初始化時，會將綁定的對象的屬性添加爲監聽對象（watcher），也就是說一個對象綁定了N個屬性，就會添加N個watcher。

如何操做

當髒檢查觸發，則會循環遍歷全部watch，最後更新DOM

通俗點講

咱們回憶一下咱們的學生時代，住校生都住在寢室裏面，每棟宿舍樓都有專門的宿管阿姨。天天晚上快熄燈的時候（觸發髒檢查了），宿管阿姨開始巡邏了，她要看哪些學生還沒回寢室呢，寢室有哪些違規現象呢。阿姨會從1樓開始一直巡邏查看到頂樓，每間宿舍都要查看（循環遍歷watcher）。可是呢，由於目前頂樓還沒住人，因此阿姨巡邏時會跳過（只檢查綁定到UI上的表達式）。最後啊，沒回寢的學生都被阿姨拿上小本本記下來了（查出了髒數據）。

2.依賴追蹤

當某一個數據（依賴數據）發生變化的時候，全部依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變更，也就是數據驅動。

下面以Vue爲例

什麼時候進行

依賴數據發生變化

如何操做

爲數據定義 getter & setter
當在data裏面定義了數據時，系統會爲這些數據添加getter和setter
獲取數據時觸發getter，爲數據賦值時觸發setter
當觸發了setter時，model發生變化，系統會通知全部的viewModel更新視圖

通俗點講

在咱們大學時期，上課仍是相對而言較嚴格的，爲了應對各項嚴格的規章制度，417寢室的室友們商量拉了一個微信羣（依賴數據：微信羣），當有重大事情時在羣裏面進行通知（每一個人均可以接收消息、發送消息 getter & setter）。

某天政治課，你們偷懶賴牀不去上課，只有小李一人去了教室，不一下子，小李就在微信羣裏面發了一句話「老師在點名！速來！」（set，更改了model，通知了全部的viewModel）。接收到消息的全部室友迅速起牀飛奔去教室（監聽到依賴數據發生變化，自動更新視圖）。

3.VDOM diff

保存上次的VDOM，對比此次的VDOM，發現差別，更改視圖
下面以React爲例

什麼時候進行

state 發生改變

如何操做

比較兩次的VDOM，層層遍歷，找出不一樣的數據，更新整個DOM

通俗點講

大學每一年最痛苦的就是期末了，期末時各個同窗打起十二分的精神，搶佔各個樓道口，通宵達旦的背書看題。這個時候少不了老師劃的重點，政治課老師劃完重點後，小熊還不放心，去找上一屆的學長討來了學長那一屆的重點，回到寢室就開始一章一章地對比，從書的第一頁翻到了最後一頁（比較兩次VDOM），把不一樣的地方都標記出來（找出不一樣的數據），最後把比較事後的整本書都背了下來（更新整個DOM）。

總結

經過以上咱們能夠看出

1.React

是自底向上的框架。
它只提供部分底層的原生實現，擁有強大的生態環境。
使用JSX / VDOM 來渲染視圖層。
使用VDOM diff更新視圖，一般整個DOM都要從新渲染過。
學習成本很高，雖然初始上手很快，但若是想要實現更爲複雜的系統，須要鑽研Redux、HOC 高階組件、render、props、Hooks等知識。

2.Angular

是自上而下的框架。
使用templates和JSX / VDOM實現視圖層。
採用髒檢查更新視圖，設置多個watcher，當watcher越多時會耗費性能。
學習門檻高，不利於初學者。
組件豐富，通常常見的功能都在框架裏能找到解決方案。
二次開發成本高，當想實現底層想法時，會影響不少組件。

3.Vue

漸進式框架。 使用templates和JSX / VDOM實現視圖層。 採用數據驅動更新視圖，有變化才更新，提高效率。 易上手，靈活性強，既能開發全新應用，又能融合進已有應用中。 性能高，超快虛擬DOM