久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術(shù)文章
文章詳情頁

一文總結(jié)Vue和React的異同

瀏覽:123日期:2022-06-10 13:05:16
目錄
  • 相同點
  • 不同點
    • 1. 核心思想不同
      • 1.1 核心思想不同導(dǎo)致寫法差異
      • 1.2 核心思想不同導(dǎo)致api差異
      • 1.3 核心思想不同導(dǎo)致社區(qū)差異
      • 1.4 核心思想不同導(dǎo)致未來升級方向不同
    • 2. 組件實現(xiàn)不同
      • 3. 響應(yīng)式原理不同
        • 4. diff算法不同
          • 5. 事件機制不同

          相同點

          Vue和React相同點非常多:

          • 都使用Virtural DOM
          • 都使用組件化思想,流程基本一致
          • 都是響應(yīng)式
          • 都有成熟的社區(qū),都支持服務(wù)端渲染

           Vue和React實現(xiàn)原理和流程基本一致,都是使用Virtual DOM + Diff算法。不管是Vue的template模板 + options api寫法,還是React的Class或者Function(js 的class寫法也是function函數(shù)的一種)寫法,底層最終都是為了生成render函數(shù),render函數(shù)執(zhí)行返回VNode(虛擬DOM的數(shù)據(jù)結(jié)構(gòu),本質(zhì)上是棵樹)。當(dāng)每一次UI更新時,總會根據(jù)render重新生成最新的VNode,然后跟以前緩存起來老的VNode進行比對,再使用Diff算法(框架核心)去真正更新真實DOM(虛擬DOM是JS對象結(jié)構(gòu),同樣在JS引擎中,而真實DOM在瀏覽器渲染引擎中,所以操作虛擬DOM比操作真實DOM開銷要小的多)。
          Vue和React通用流程:vue template/react jsx -> render函數(shù) -> 生成VNode -> 當(dāng)有變化時,新老VNode diff -> diff算法對比,并真正去更新真實DOM。
          核心還是Virtual DOM,為什么Vue和React都選擇Virtual DOM(React首創(chuàng)VDOM,Vue2.0開始引入VDOM)?,個人認為主要有以下幾點:

          • 減少直接操作DOM。框架給我們提供了屏蔽底層dom書寫的方式,減少頻繁的整更新dom,同時也使得數(shù)據(jù)驅(qū)動視圖
          • 為函數(shù)式UI編程提供可能(React核心思想)
          • 可以跨平臺,渲染到DOM(web)之外的平臺。比如ReactNative,Weex

          不同點

          1. 核心思想不同

          Vue早期定位是盡可能的降低前端開發(fā)的門檻(這跟Vue作者是獨立開發(fā)者也有關(guān)系)。所以Vue推崇靈活易用(漸進式開發(fā)體驗),數(shù)據(jù)可變,雙向數(shù)據(jù)綁定(依賴收集)。

          React早期口號是Rethinking Best Practices。背靠大公司Facebook的React,從開始起就不缺關(guān)注和用戶,而且React想要做的是用更好的方式去顛覆前端開發(fā)方式(事實上跟早期jquery稱霸前端,的確是顛覆了)。所以React推崇函數(shù)式編程(純組件),數(shù)據(jù)不可變以及單向數(shù)據(jù)流。函數(shù)式編程最大的好處是其穩(wěn)定性(無副作用)和可測試性(輸入相同,輸出一定相同),所以通常大家說的React適合大型應(yīng)用,根本原因還是在于其函數(shù)式編程。
          由于兩者核心思想的不同,所以導(dǎo)致Vue和React許多外在表現(xiàn)不同(從開發(fā)層面看)。

          1.1 核心思想不同導(dǎo)致寫法差異

          Vue推崇template(簡單易懂,從傳統(tǒng)前端轉(zhuǎn)過來易于理解)、單文件vue。而且雖然Vue2.0以后使用了Virtual DOM,使得Vue也可以使用JSX(bebel工具轉(zhuǎn)換支持),但Vue官方依然首先推薦template,這跟Vue的核心思想和定位有一定關(guān)系。

          React推崇JSX、HOC、all in js。

          1.2 核心思想不同導(dǎo)致api差異

          Vue定位簡單易上手,基于template模板 + options API,所以不可避免的有較多的概念和api。比如template模板中需要理解slot、filter、指令等概念和api,options API中需要理解watch、computed(依賴收集)等概念和api。
          React本質(zhì)上核心只有一個Virtual DOM + Diff算法,所以API非常少,知道setState就能開始開發(fā)了。

          1.3 核心思想不同導(dǎo)致社區(qū)差異

          由于Vue定義簡單易上手,能快速解決問題,所以很多常見的解決方案,是Vue官方主導(dǎo)開發(fā)和維護。比如狀態(tài)管理庫Vuex、路由庫Vue-Router、腳手架Vue-CLI、Vutur工具等。屬于那種大包大攬,遇到某類通用問題,只需要使用官方給出的解決方案即可。

          React只關(guān)注底層,上層應(yīng)用解決方案基本不插手,連最基礎(chǔ)的狀態(tài)管理早期也只是給出flow單向數(shù)據(jù)流思想,大部分都丟給社區(qū)去解決。比如狀態(tài)管理庫方面,有redux、mobx、redux-sage、dva等一大堆(選擇困難癥犯了),所以這也造就了React社區(qū)非常繁榮。同時由于有社區(qū)做上層應(yīng)用解決方案,所以React團隊有更多時間專注于底層升級,比如花了近2年時間把底層架構(gòu)改為Fiber架構(gòu),以及創(chuàng)造出React Hooks來替換HOC,Suspense等。 更多框架設(shè)計思想可看 尤雨溪 - 在框架設(shè)計中尋求平衡 (opens new window)。

          1.4 核心思想不同導(dǎo)致未來升級方向不同

          核心思想不同,決定了Vue和React未來不管怎么升級變化,Vue和React考慮的基本盤不變。
          Vue依然會定位簡單易上手(漸進式開發(fā)),依然是考慮通過依賴收集來實現(xiàn)數(shù)據(jù)可變。這點從Vue3核心更新內(nèi)容可以看到:template語法基本不變、options api只增加了setup選項(composition api)、基于依賴收集(Proxy)的數(shù)據(jù)可變。更多Vue3具體更新內(nèi)容可看筆者總結(jié) Vue3設(shè)計思想 (opens new window)或者 尤雨溪 - 聊聊 Vue.js 3.0 Beta 官方直播 (opens new window)。
          React的函數(shù)式編程這個基本盤不會變。React核心思想,是把UI作為Basic Type,比如String、Array類型,然后經(jīng)過render處理,轉(zhuǎn)換為另外一個value(純函數(shù))。從React Hooks可以看出,React團隊致力于組件函數(shù)式編程,(純組件,無class組件),盡量減少副作用(減少this,this會引起副作用)。

          2. 組件實現(xiàn)不同

          Vue源碼實現(xiàn)是把options掛載到Vue核心類上,然后再new Vue({options})拿到實例(vue組件的script導(dǎo)出的是一個掛滿options的純對象而已)。所以options api中的this指向內(nèi)部Vue實例,對用戶是不透明的,所以需要文檔去說明this.s l o t 、 t h i s . slot、this.slot、this.xxx這些api。另外Vue插件都是基于Vue原型類基礎(chǔ)之上建立的,這也是Vue插件使用Vue.install的原因,因為要確保第三方庫的Vue和當(dāng)前應(yīng)用的Vue對象是同一個。

          React內(nèi)部實現(xiàn)比較簡單,直接定義render函數(shù)以生成VNode,而React內(nèi)部使用了四大組件類包裝VNode,不同類型的VNode使用相應(yīng)的組件類處理,職責(zé)劃分清晰明了(后面的Diff算法也非常清晰)。React類組件都是繼承自React.Component類,其this指向用戶自定義的類,對用戶來說是透明的。

          3. 響應(yīng)式原理不同

          Vue

          Vue依賴收集,自動優(yōu)化,數(shù)據(jù)可變。
          Vue遞歸監(jiān)聽data的所有屬性,直接修改。
          當(dāng)數(shù)據(jù)改變時,自動找到引用組件重新渲染。

          React

          React基于狀態(tài)機,手動優(yōu)化,數(shù)據(jù)不可變,需要setState驅(qū)動新的State替換老的State。
          當(dāng)數(shù)據(jù)改變時,以組件為根目錄,默認全部重新渲染

          4. diff算法不同

          兩者流程思維上是類似的,都是基于兩個假設(shè)(使得算法復(fù)雜度降為O(n)):

          • 不同的組件產(chǎn)生不同的 DOM 結(jié)構(gòu)。當(dāng)type不相同時,對應(yīng)DOM操作就是直接銷毀老的DOM,創(chuàng)建新的DOM。
          • 同一層次的一組子節(jié)點,可以通過唯一的 key 區(qū)分。

          但兩者源碼實現(xiàn)上有區(qū)別:
          Vue基于snabbdom庫,它有較好的速度以及模塊機制。Vue Diff使用雙向鏈表,邊對比,邊更新DOM。
          React主要使用diff隊列保存需要更新哪些DOM,得到patch樹,再統(tǒng)一操作批量更新DOM。

          5. 事件機制不同

          Vue

          • Vue原生事件使用標(biāo)準(zhǔn)Web事件
          • Vue組件自定義事件機制,是父子組件通信基礎(chǔ)
          • Vue合理利用了snabbdom庫的模塊插件

          React

          • React原生事件被包裝,所有事件都冒泡到頂層document監(jiān)聽,然后在這里合成事件下發(fā)。基于這套,可以跨端使用事件機制,而不是和Web
            DOM強綁定。
          • React組件上無事件,父子組件通信使用props

          以上就是一文總結(jié)Vue和React的異同的詳細內(nèi)容,更多關(guān)于Vue和React的異同的資料請關(guān)注其它相關(guān)文章!

          標(biāo)簽: JavaScript
          主站蜘蛛池模板: 洪泽县| 黑水县| 措勤县| 黔西| 卢龙县| 古交市| 滦平县| 莲花县| 克什克腾旗| 寿宁县| 洪泽县| 石楼县| 老河口市| 七台河市| 堆龙德庆县| 浏阳市| 紫云| 绍兴县| 景谷| 敖汉旗| 嵊泗县| 通山县| 南木林县| 大名县| 兴城市| 上饶市| 光山县| 华蓥市| 丁青县| 绿春县| 高陵县| 项城市| 丘北县| 邵东县| 井研县| 林州市| 衢州市| 扶风县| 云霄县| 清涧县| 吴川市|