資訊專欄INFORMATION COLUMN
摘要：好好打基礎，然后多嘗試不同風格的框架，因為只有嘗試過后才能理解比如徐飛提到的各種權衡，也只有嘗試過后才能知道哪個能真正提升自己的開發效率。
今天看了幾篇關于這三個主流框架的PK，如標題：react.js,angular.js,vue.js學習哪個好？相信每個人都有這種問題。
現在的前端框架層出不窮，作為前端開發者何去何從？fackbook的react.js盛世火熱，react native打開了JS占領android和ios領地，讓JS變的無所不能。angular.js背后有谷歌，個人感覺太重了，相對而言更喜歡vue,但是實際選擇哪個更好呢？總不能一下都學了也沒這個精力啊那么當你讀完這篇文章或許你就有答案了！
對于初學React者。一定認為這玩意真難學，還不好寫，還不如原生JS寫的6呢。沒錯起碼我現在是這么覺得的，沒準以后會發現它的好呢也說不定。先來說說都有的感想：
認為ReactJS在真正開發大型復雜系統的時候并不好，首先一點就是，一個完整頁面的HTML模板被完全碎片化了，被分散到一個個的Component里，這樣的話，UI Designer和Dev根本沒有一個統一的視圖去協作。
那么，徐飛給你回答了這個問題，往下看：
我們學一個東西，通常兩個目的：
1.為了解決現有的問題
2.為了解決將來可能會有的問題
所以，在學這些東西之前，先必須了解，它們是用來解決什么問題的。
Angular，React，Vue，這三者其實面對的是同一個領域，那就是Web應用，什么是Web應（前端做的都是web應用包括移動端）
這三者中，Angular的適用領域相對窄一些，React可以拓展到服務端，移動端Native部分，而Vue因為比較輕量，還能用于業務場景非常輕的頁面中。
在Web應用中，我們需要解決的問題可以歸納為三類：
狀態
組織
效率
1. 狀態
在一個業務界面中，我們可能會根據某些數據去生成一塊界面，然后通過界面上的某些操作，改變一些數據，從而影響界面的另外一些部分。
這里面就存在兩種關系，一種是從數據到界面，一種是從界面到數據。能夠描述界面當前狀況的數據，就可以被稱為狀態。
如果不對狀態作抽象，很可能會導致邏輯的混亂，比如說，一個地方點了，要改多個地方，這種代碼直接寫，很容易寫亂的，所以，不同的框架采用不同的方式進行了處理。
比如說MVVM流的Angular和Vue，還有Avalon，Regular，Knockout，都是走的這一流派，通過類似模板的語法，描述界面狀態與數據的綁定關系，然后通過內部轉換，把這個結構建立起來，當界面發生變化的時候，按照配置規則去更新相應的數據，然后，再根據配置好的規則去，從數據更新界面狀態。
React走的是另外一個流派，就是所謂的函數式，在這個里面，推崇的是單向數據流：給定原始界面（或數據），施加一個變化，就能推導出另外一個狀態（界面或者數據的更新）。
在這里需要額外提一下ReactiveJS，它的理念又有所不同，是基于Reactive的。
2. 組織
剛才這些，都可以看作是滿足最基本的需求，那就是業務的正確性。在這之后，就有另外的訴求了，首當其沖的就是整個業務代碼的組織。
所謂組織，指的是兩個方面，一方面是模塊關系，另一方面是業務模型。
我們剛才提到組件化，整個應用形成了一個組件樹，組件之間可能會需要通訊，它們通訊的內容可能是簡單的界面事件，也可能是業務含義較深，能夠牽一發而動全身的。界面是怎么來的？是由初始界面加上狀態形成的，為了能夠反映界面的變化，我們必須使得對業務模型的每一個擾動都收斂到確切的狀態，所以，這也就是Redux這類東西的意義所在。
再插另外一句：很多人吐槽Angular大而全笨重，吐槽React全家桶，但其實世界上大部分人是沒有框架整合能力的，小而美的庫最后整合了，在面臨各種業務需求之后不斷引入新模塊，也還是一個大而全的方案。在絕大部分場景下，還是有一整套標配模塊比較好。你看ExtJS他也多帶帶提供ExtCore模塊，但不但競爭不過jQuery，連mootools和prototype都競爭不過，用它的人幾乎都是用全方案的。
3. 效率
效率也分兩種，一種是開發效率，一種是運行效率。
我們前面提到，組件化，這是提升開發效率的一種手段，在組件化這個點上，各路框架的組織方式大同小異，反正最終都是組件樹。具體到單個組件的實現上，我個人是傾向于MVVM流的，之前做過對比，MVVM系的代碼量會少一些，開發效率稍高一點。
其中，Angular因為實現的特殊性，有作用域繼承之類的雙刃劍黑魔法，開發效率的不穩定因素要高不少，深刻理解的人用起來效率很高，不理解的用了到處是坑。
再看運行效率，這里面，Angular是較低的那個，主要在于數據變更檢測方式，但這也不是絕對的，在部分場景下，臟檢測未必就沒有優勢，這個記得@鄭海波論述過。
運行效率的另外一面主要是創建和修改DOM，在創建上，大家是沒有太大差異的，而在修改DOM的時候，React首創的虛擬DOM有很大優勢，所以其他框架內部實現也在逐漸借鑒。
如果看到這里，很可能你會疑惑，題目問的明明是學哪個好，我說這些是什么意思？
我用這些篇幅說明了Web應用的業務開發中存在哪些麻煩，每種技術又是來解決什么痛點的，這樣，你可以按照自己的需求去，結合業務場景進行分析，然后選擇需要的挨個學下去。
其實學API之類的很快，還是要把自己業務中的難點想清楚，帶著問題去學，帶著需求去學，學思想重于學使用，一定能事半功倍。
引用尤雨溪的話：
想要只學一個一勞永逸，那是不可能的。好好打基礎，然后多嘗試不同風格的框架，因為只有嘗試過后才能理解比如@徐飛提到的各種權衡，也只有嘗試過后才能知道哪個能真正提升自己的開發效率。說沒精力，那是借口。
跟大家共勉一句話：
對很多人來說，技術都不是一生的職業導向，那么，提升自己的眼界，站在更高的角度思考問題就顯得尤為重要，從自己，到團隊，公司，再到整個業界，眼界寬廣了，技術也就是你的左膀右臂。——陳韜
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88395.html
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：對于前端，有時候需要實現視圖層和數據層的雙向綁定例如當前流行的各種框架和類庫。為代表前端數據劫持。參考資料實現數據雙向綁定的三種方式談談中的雙向數據綁定非常簡單的雙向數據綁定框架三 對于前端，有時候需要實現視圖層和數據層的雙向綁定(two-way-binding), 例如當前流行的各種框架和類庫:Vue.js、Angular.js、React.js。 然而，他們最原始的實現方式其實都相...
摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前 一、團隊組織 網站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...
閱讀 2585·2021-10-19 11:41
閱讀 2423·2021-09-01 10:32
閱讀 3382·2019-08-29 15:21
閱讀 1761·2019-08-29 12:20
閱讀 1170·2019-08-29 12:13
閱讀 606·2019-08-26 12:24
閱讀 2524·2019-08-26 10:26
閱讀 840·2019-08-23 18:40
