柚子快報激活碼778899分享：【自我總結(jié)】前端框架發(fā)展進程

http://yzkb.51969.com/

去年寫過一篇文章是將后端框架發(fā)展歷程的，今年在項目中使用了vue3這一框架，由于本人對于技術(shù)的發(fā)展歷史比較感興趣，故現(xiàn)在總結(jié)一下前端技術(shù)及前端框架的發(fā)展進程，通過梳理前端框架的發(fā)展進程，也是對于前端一些相關(guān)技術(shù)的進一步深入地了解。

一、 前端框架大致發(fā)展路線：

1、石器時代（刀耕火種 純css js）

前端的發(fā)展歷史，又非常直觀地顯示在你看到的前端網(wǎng)頁的演變歷史中。整個90年代，受限于網(wǎng)速，網(wǎng)頁都是靜態(tài)頁，顯示非常單一，前端的工作大部分都只是讓美工來切切圖和寫寫HTML+CSS。也因此，在90年代，前端還處在一種萌發(fā)期的狀態(tài)，前端工程師這一工種也沒有明確出現(xiàn)。 Ajax這個技術(shù)讓我們可以異步的獲取數(shù)據(jù)并且刷新頁面，從此前端不再受限于后端的模板，這也宣告了Web2.0時代正式到來。至此，前端工程師也正式作為一個獨立工種出現(xiàn)。

2、鐵器時代（jquery）

jQuery的出現(xiàn)迅速風(fēng)靡全球，一個$走天下，學(xué)會jQuery就等同于學(xué)會了前端，算是前端車同軸的時代。在這之后，前端的具體開發(fā)不再被JavaScript的兼容性問題所困擾。 $(‘#alert-btn’).on(‘click’,function(){ $(‘#app .input’).val(‘hi’) }) 那個時候?qū)懘a，就是找到某個元素，進行DOM（文檔對象模型（Document Object Model））操作，特別像鐵器時代的拼刺刀，隨著前端項目規(guī)模的逐漸提升，前端也需要規(guī)?；臅r候，在2009年AngularJS和Node.js的誕生，也宣告前端工業(yè)革命的到來。

3、工業(yè)時代（三大框架）

AngularJS的誕生，引領(lǐng)了前端MVVM模式的潮流；Node.js的誕生，讓前端有了入侵后端的能力，也加速了前端工程化的誕生。 現(xiàn)在前端三大框架Angular、React、Vue 的發(fā)展主線，也就是從這里開始的。 所謂MVVM，就是在前端的場景下，把Controller變成了View-Model層，作為Model和View的橋梁，Model數(shù)據(jù)層和View視圖層交給View-Model來同步

二、三大框架的各自特點與區(qū)別

??????在前端MVVM模式下，不同框架的目標(biāo)都是一致的，就是利用數(shù)據(jù)驅(qū)動頁面，但是怎么處理數(shù)據(jù)的變化，各個框架走出了不同的路線 ??????這些框架要回答的核心問題就是，數(shù)據(jù)發(fā)生變化后，我們怎么去通知頁面更新。各大框架在這個步驟上，各顯神通： 1、Angular1 臟檢查 每次用戶交互時都檢查一次數(shù)據(jù)是否變化，有變化就去更新DOM這一方法 2、vue1 響應(yīng)式 初始化的時候，Watcher監(jiān)聽了數(shù)據(jù)的每個屬性，這樣數(shù)據(jù)發(fā)生變化的時候，我們就能精確地知道數(shù)據(jù)的哪個key變了，去針對性修改對應(yīng)的DOM即可如果把網(wǎng)頁數(shù)據(jù)看成你管理的員工，普通數(shù)據(jù)就是那種每次你都需要找到他，告訴他要怎么做的人，響應(yīng)式數(shù)據(jù)就是他本身有任何變化，都會主動給你發(fā)日報告訴你的積極員工。 3、react 在頁面初始化的時候，在瀏覽器DOM之上，搞了一個叫虛擬DOM的東西，也就是用一個JavaScript對象來描述整個DOM樹。我們可以很方便的通過虛擬DOM計算出變化的數(shù)據(jù)，去進行精確的修改。 由于瀏覽器操作DOM一直都是性能殺手，虛擬DOM的計算數(shù)據(jù)Diff的邏輯，能夠確保盡可能少的操作DOM，這也是虛擬DOM驅(qū)動的框架性能一直比較優(yōu)秀的原因之一。

vue與react

??????在 Vue 框架下，如果數(shù)據(jù)變了，那框架會主動告訴你修改了哪些數(shù)據(jù)；而React的數(shù)據(jù)變化后，我們只能通過新老數(shù)據(jù)的計算 Diff來得知數(shù)據(jù)的變化。 （一個是主動匯報 另一個是計算得出）(后來改為DOM節(jié)點后也是這樣的機制) react使用diff算法搜尋需要更新的DOM節(jié)點 vue通過響應(yīng)式 當(dāng)響應(yīng)式發(fā)生改變的時候修改對應(yīng)的虛擬DOM節(jié)點

性能瓶頸：

vue：響應(yīng)式數(shù)據(jù)新建Watcher監(jiān)聽，本身就比較損耗性能，項目大了之后每個數(shù)據(jù)都有一個watcher會影響性能。 react：如果虛擬DOM樹過于龐大，使得計算時間大于16.6ms的時候，就可能會造成性能的卡頓。

解決瓶頸：

vue： ??????使用虛擬DOM解決了響應(yīng)式數(shù)據(jù)過多的內(nèi)存占用問題，又良好地規(guī)避了React中虛擬DOM的問題， 還通過虛擬DOM給 Vue 帶來了跨端的能力。 響應(yīng)式數(shù)據(jù)是主動推送變化，虛擬DOM是被動計算數(shù)據(jù)的Diff，一個推一個拉，它們看起來是兩個方向的技術(shù)，但被 Vue 2 很好地融合在一起，采用的方式就是組件級別的劃分。 對于 Vue 2 來說，組件之間的變化，可以通過響應(yīng)式來通知更新。組件內(nèi)部的數(shù)據(jù)變化，則通過虛擬DOM去更新頁面。這樣就把響應(yīng)式的監(jiān)聽器，控制在了組件級別，而虛擬DOM的量級，也控制在了組件的大小。（組件間仍然使用響應(yīng)式 組件內(nèi)部使用虛擬DOM ）組件內(nèi)部是沒有Watcher監(jiān)聽器的，而是通過虛擬DOM來更新，每個組件對應(yīng)一個監(jiān)聽器，大大減小了監(jiān)聽器的數(shù)量。 react： 借鑒了操作系統(tǒng)時間分片的概念，引入了Fiber架構(gòu)，把整個虛擬DOM樹微觀化，變成鏈表，然后我們利用瀏覽器的空閑時間計算Diff 一旦瀏覽器有需求，我們可以把沒計算完的任務(wù)放在一旁，把主進程控制權(quán)還給瀏覽器，等待瀏覽器下次空閑。 這種架構(gòu)雖然沒有減少運算量，但是巧妙地利用空閑實現(xiàn)計算，解決了卡頓的問題。 在上圖中，左側(cè)是一個樹形結(jié)構(gòu)，由于樹形結(jié)構(gòu)的Diff很難中斷，右側(cè)是把樹形結(jié)構(gòu)改造成了鏈表，遍歷嚴(yán)格地按照子元素->兄弟元素->父元素的邏輯，隨時可以中斷和恢復(fù)Diff 的計算過程。

如何進行框架選型

vue和react的對比：

1、使用難度 vue < react

Vue框架是可以漸進使用的，開發(fā)門檻明顯比React低很多。你可以直接在html文件中引入Vue的編譯包，看下入門文檔，稍微處理下代碼入口就可以愉快的使用了，非常輕快。后續(xù)需要引入其它的組件、模塊，也是比較容易的。它的設(shè)定更符合習(xí)慣，它沒有發(fā)明太多的概念和獨特的用法。Vue采用了清晰的三分法處理組件功能：結(jié)構(gòu) – template，功能 – script，表現(xiàn) – style。這些概念符合開發(fā)者對html的習(xí)慣認(rèn)知，理解起來毫不費力。 React框架并不是一個單純的UI庫，它創(chuàng)造了一個龐大的技術(shù)棧，里面充斥著各種新思想的試驗品和廢棄物。它發(fā)明了很多新概念，對Web技術(shù)的發(fā)展是有巨大貢獻的，但是不等于說，里面的東西都是獲得大家認(rèn)可，都喜歡的。而且它也沒什么標(biāo)準(zhǔn)一說，所有組件自由競爭。這是它的優(yōu)點也是槽點。優(yōu)點是總有新東西不斷涌現(xiàn)，缺點是你需要學(xué)習(xí)和挑選。

2、設(shè)計思路

??????1)狀態(tài)管理是前端里面的重要內(nèi)容。React的狀態(tài)管理比較麻煩，redux沒那么容易使用。自帶的setState不是很簡單么？哪里，這個小功能的坑是很多的，比如異步，比如更新后中途又被沖掉等等。Vue的狀態(tài)管理則容易很多，官方直接做了一個庫，相對于React，估計10%的難度都沒有。估計是跟作者開發(fā)使用過另外一個出名的前端框架：Angular有關(guān)系。Vue吸收了Angular的很多優(yōu)點。 ??????2)雙向綁定功能是Vue的一個設(shè)計，一些其它前端庫也有這個能力，但React是沒有的。別小看這個小小的功能點，它影響很大。不信，你自己做一個表單，實際手把手的試一下，這個事兒帶來多少的麻煩。保守的說，支持雙向綁定功能，可以節(jié)省40%以上的代碼量，而這些代碼大部分都是機械代碼，沒有什么技術(shù)含量。有人說可以用別的方法模擬出來，但它畢竟不是官方的支持。 ??????3)React傾向于使用受控組件，這大大加重了開發(fā)負(fù)擔(dān)，特別是對于比較復(fù)雜的系統(tǒng)，更為明顯。所謂的“受控組件”，是自己管理這個組件的一切，包括行為、外觀等等。相比之下，直接使用標(biāo)準(zhǔn)的HTML5組件 + CSS修飾，要容易的多。受控組件可以管理一切，但是你也得自己DIY一切，利弊自己體會。 ??????使用React，你會發(fā)現(xiàn)總要不停的拆分組件，拆細(xì)，然后一堆參數(shù)傳來傳去。這個有好有壞。優(yōu)點是拆細(xì)的組件可以實施單一職責(zé)，降低復(fù)雜度，缺點是管理麻煩。這在工程實踐中，需要平衡的。 ??????4)與React自創(chuàng)的jsx不同，Vue使用的是模板-Template模式。這個更符合通常的習(xí)慣。特別是以前做過后端模板開發(fā)會更為熟悉，它就是使用數(shù)據(jù)來渲染骨架里面的細(xì)節(jié)，得到可以展示的結(jié)果。React自創(chuàng)的jsx還有一套規(guī)則需要學(xué)習(xí)。 ??????5)React社區(qū)鼓吹“CSS-in-JS”。這個設(shè)計引發(fā)了很多爭議，使用不是不可以，負(fù)擔(dān)更加沉重。因為你無法按習(xí)慣的CSS模式編寫樣式了，需要按各種五花八門的實現(xiàn)規(guī)則來書寫。 ??????6)粗略估計，如果你的工程使用React實現(xiàn)，總體成本可能是使用Vue實現(xiàn)的5倍以上。計算方式：React的難度 + 組件開發(fā)難度 + UI框架使用難度 + CSS使用難度 + 其它雜項。 如果團隊中有很多下限很低的成員還是用vue好一些，模板化可以規(guī)避很多錯誤 參考文章： https://zhuanlan.zhihu.com/p/422997031 《01 | 宏觀視角：從前端框架發(fā)展史聊聊為什么要學(xué)Vue 3？》 https://zhuanlan.zhihu.com/p/522160995 《從前端發(fā)展史來聊聊 Vue3 的未來價值》 https://zhuanlan.zhihu.com/p/479231253 《為什么我建議前端框架優(yōu)先選Vue而不是React》。

柚子快報激活碼778899分享：【自我總結(jié)】前端框架發(fā)展進程

http://yzkb.51969.com/

文章來源