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