色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

詳談 Vue 和 React 的八大區(qū)別

如意 ? 來源:晨曦大前端微信公眾號 ? 作者:晨曦 ? 2020-09-15 15:27 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

一、監(jiān)聽數(shù)據(jù)變化的實現(xiàn)原理不同

為什么 React 不精確監(jiān)聽數(shù)據(jù)變化呢 ?這是因為 Vue 和 React 設(shè)計理念上的區(qū)別, Vue 使用的是可變數(shù)據(jù),而React更強調(diào)數(shù)據(jù)的不可變。所以應(yīng)該說沒有好壞之分,Vue更加簡單,而React構(gòu)建大型應(yīng)用的時候更加魯棒。

二、數(shù)據(jù)流的不同

詳談 Vue 和 React 的八大區(qū)別

大家都知道Vue中默認是支持雙向綁定的。在Vue1.0中我們可以實現(xiàn)兩種雙向綁定:

props v-model

在 Vue2.x 中去掉了第一種, 也就是父子組件之間不能雙向綁定了(但是提供了一個語法糖自動幫你通過事件的方式修改),并且 Vue2.x 已經(jīng)不鼓勵組件對自己的 props 進行任何修改了 。

然而 React從誕生之初就不支持雙向綁定,React一直提倡的是單向數(shù)據(jù)流,他稱之為 onChange/setState() 模式 。不過由于我們一般都會用 Vuex 以及 Redux 等單向數(shù)據(jù)流的狀態(tài)管理框架,因此很多時候我們感受不到這一點的區(qū)別了。

三、HOC和mixins

在Vue中我們組合不同功能的方式是通過mixin,而在React中我們通過HOC(高階組件)。React 最早也是使用 mixins 的,不過后來他們覺得這種方式對組件侵入太強會導(dǎo)致很多問題,就棄用了 mixinx 轉(zhuǎn)而使用 HoC,關(guān)于mixin究竟哪里不好,可以參考React官方的這篇文章 Mixins Considered Harmful。而 Vue 一直是使用 mixin 來實現(xiàn)的。

但是為什么Vue不采用HOC的方式來實現(xiàn)呢?

因為 高階組件本質(zhì)就是高階函數(shù),React的組件是一個純粹的函數(shù),所以高階函數(shù)對React來說非常簡單 。但是Vue就不行了, Vue中組件是一個被包裝的函數(shù),并不簡單的就是我們定義組件的時候傳入的對象或者函數(shù) 。比如我們定義的模板怎么被編譯的?比如聲明的props怎么接收到的?這些都是vue創(chuàng)建組件實例的時候隱式干的事。由于vue默默幫我們做了這么多事,所以我們自己如果直接把組件的聲明包裝一下,返回一個高階組件,那么這個被包裝的組件就無法正常工作了。

四、組件通信的區(qū)別

詳談 Vue 和 React 的八大區(qū)別

在Vue 中有三種方式可以實現(xiàn)組件通信:

父組件通過 props 向子組件傳遞數(shù)據(jù)或者回調(diào),雖然可以傳遞回調(diào),但是我們一般只傳數(shù)據(jù),而通過 事件的機制來處理子組件向父組件的通信

子組件通過 事件 向父組件發(fā)送消息

通過 V2.2.0 中新增的 provide/inject 來實現(xiàn)父組件向子組件注入數(shù)據(jù),可以跨越多個層級。

在React中,也有對應(yīng)的三種方式:

父組件通過 props 可以向子組件傳遞數(shù)據(jù)或者回調(diào)

可以通過 context 進行跨層級的通信 ,這其實和 provide/inject 起到的作用差不多。

可以看到, React 本身并不支持自定義事件 ,Vue中子組件向父組件傳遞消息有兩種方式:事件和回調(diào)函數(shù),而且Vue更傾向于使用事件 。但是 在 React 中我們都是使用回調(diào)函數(shù)的 ,這可能是他們二者最大的區(qū)別。

五、渲染模版的不同

在表層上, 模板的語法不同

React是通過JSX渲染模版

而Vue是通過一種拓展的HTML語法進行渲染

但其實這只是表面現(xiàn)象,畢竟 React并不必須依賴JSX 。在深層上,模板的原理不同,這才是他們的本質(zhì)區(qū)別:

React是在組件JS代碼中,通過 原生JS實現(xiàn) 模板中的常見語法,比如插值,條件,循環(huán)等,都是通過JS語法實現(xiàn)的

Vue是在和組件JS代碼分離的單獨的模板中, 通過指令來實現(xiàn)的 ,比如 條件語句就需要 v-if 來實現(xiàn)

react中 render函數(shù)是支持閉包特性的,所以我們import的組件在render中可以直接調(diào)用 。但是在Vue中, 由于模板中使用的數(shù)據(jù)都必須掛在 this 上進行一次中轉(zhuǎn),所以我們import 一個組件完了之后,還需要在 components 中再聲明下,這樣顯然是很奇怪但又不得不這樣的做法。

六、Vuex和Redux的區(qū)別

從表面上來說, store 注入和使用方式有一些區(qū)別 。在 Vuex 中, $store 被直接注入到了組件實例中 ,因此可以比較靈活的使用:

使用dispatch和commit提交更新

通過mapState或者直接通過this.$store來讀取數(shù)據(jù)

在 Redux 中, 我們每一個組件都需要顯示的用 connect 把需要的 props 和 dispatch 連接起來。

另外 Vuex 更加靈活一些, 組件中既可以 dispatch action 也可以 commit updates ,而 Redux 中只能進行 dispatch,并不能直接調(diào)用 reducer 進行修改。

從實現(xiàn)原理上來說,最大的區(qū)別是兩點:

Redux 使用的是不可變數(shù)據(jù),而Vuex的數(shù)據(jù)是可變的。Redux每次都是用新的state替換舊的state,而Vuex是直接修改

Redux 在檢測數(shù)據(jù)變化的時候,是通過 diff 的方式比較差異的,而Vuex其實和Vue的原理一樣,是通過 getter/setter來比較的(如果看Vuex源碼會知道,其實他內(nèi)部直接創(chuàng)建一個Vue實例用來跟蹤數(shù)據(jù)變化)

七、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。

八、事件機制不同

Vue

Vue原生事件使用 標(biāo)準(zhǔn)Web事件

Vue組件 自定義事件機制,是父子組件通信基礎(chǔ)

Vue合理利用了snabbdom庫的模塊插件

React

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

React組件上無事件,父子組件通信使用props
責(zé)編AJX

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 算法
    +關(guān)注

    關(guān)注

    23

    文章

    4709

    瀏覽量

    95333
  • vue
    vue
    +關(guān)注

    關(guān)注

    0

    文章

    58

    瀏覽量

    8200
收藏 0人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點推薦

    八大主流器件助你打造頂級智能家居

    八大主流器件助你打造頂級智能家居
    發(fā)表于 01-01 19:36

    相比React全家桶選擇Vue2有何優(yōu)劣?

    相比 React 全家桶,選擇 Vue2 有何優(yōu)劣?
    發(fā)表于 06-01 05:55

    解決傳導(dǎo)干擾的八大對策分享

    容易解決,只要增加電源輸入電路中 EMC 濾波器的節(jié)數(shù),并適當(dāng)調(diào)整每節(jié)濾波器的參數(shù),基本上都能滿足要求,下面講解的八大對策,以解決對付傳導(dǎo)干擾難題。
    發(fā)表于 10-22 14:23

    分享電路保護器件的八大作用

    分享電路保護器件的八大作用
    發(fā)表于 06-07 07:13

    CES八大技術(shù)趨勢:平板電腦居首

    CES八大技術(shù)趨勢:平板電腦居首  導(dǎo)讀:美國CNN網(wǎng)站昨天撰文,列舉了本屆國際消費電子展(以下簡稱“CES”)的八大趨勢,其中平板電腦位居首位。   以下為
    發(fā)表于 01-08 09:31 ?676次閱讀

    電腦八大提速技巧詳解

    本文檔內(nèi)容介紹了電腦八大提速技巧詳解,希望對網(wǎng)友有所幫助。
    發(fā)表于 09-20 14:44 ?1次下載
    電腦<b class='flag-5'>八大</b>提速技巧詳解

    磷酸鐵鋰電池八大缺陷及八大優(yōu)勢分析

    本文開始介紹了磷酸鐵鋰電池的概念和工作原理,其次介紹了磷酸鐵鋰電池八大優(yōu)勢和八大劣勢,最后介紹了磷酸鐵鋰電池在通信行業(yè)中的應(yīng)用及發(fā)展方向。
    發(fā)表于 04-17 08:37 ?7.3w次閱讀
    磷酸鐵鋰電池<b class='flag-5'>八大</b>缺陷及<b class='flag-5'>八大</b>優(yōu)勢分析

    詳談數(shù)組和指針的區(qū)別與聯(lián)系

    詳談數(shù)組和指針的區(qū)別與聯(lián)系
    的頭像 發(fā)表于 06-29 15:18 ?2.3w次閱讀
    <b class='flag-5'>詳談</b>數(shù)組和指針的<b class='flag-5'>區(qū)別</b>與聯(lián)系

    詳談NB-IoT和LoRa的區(qū)別及應(yīng)用

    詳談NB-IoT和LoRa的區(qū)別及應(yīng)用
    發(fā)表于 05-08 10:28 ?111次下載

    變頻電源串聯(lián)與并聯(lián)的八大區(qū)別

    廣泛的應(yīng)用。有多種方法可以對變頻電源進行分類。根據(jù)負載諧振模式,它可以分為串聯(lián)變頻電源和并聯(lián)變頻電源,它們之間有什么區(qū)別?變頻電源串聯(lián)與并聯(lián)的八大區(qū)別  一、電源阻抗差異  串聯(lián)變頻電源的負載電路對電源的阻抗低,需要來自電壓源的電源。因此,經(jīng)過整流和濾波的直流電源的兩端應(yīng)
    發(fā)表于 11-08 18:36 ?3次下載
    變頻電源串聯(lián)與并聯(lián)的<b class='flag-5'>八大區(qū)別</b>

    00004__2016八大MCU廠商

    00004__2016八大MCU廠商
    發(fā)表于 11-25 18:51 ?3次下載
    00004__2016<b class='flag-5'>八大</b>MCU廠商

    簡要介紹ReactVue

    以上代碼描述了React怎么在指定的頁面元素(id為id01的div元素)中改變相應(yīng)的字符串內(nèi)容(從"Hello World!"到"Hello John Doe!")。其中第5行的ReactDOM.render()是React JS庫提供的一個方法
    發(fā)表于 07-14 09:32 ?1289次閱讀

    關(guān)于ReactVue產(chǎn)生一定的認知

    Vue2 相較 Vue3 版本而言牢牢占據(jù)著大部分 Vue 開發(fā)者的視野,但是因為 Vue 官方已經(jīng)把 Vue3 作為默認的版本,所以在此同
    的頭像 發(fā)表于 11-02 13:18 ?1057次閱讀

    關(guān)于“ReactVue該用哪個”

    React 有函數(shù)式組件的和類組件兩種寫法,鑒于 class 寫法較老,且這種寫法不利于構(gòu)建工具的 Tree-shaking ,可能導(dǎo)致構(gòu)建產(chǎn)物體積增加,而函數(shù)式組件的 hooks 寫法更符合未來的潮流 , 所以類組件在此也不做詳細的介紹,只選取函數(shù)式組件寫法的 React
    的頭像 發(fā)表于 11-10 10:15 ?1191次閱讀

    【古瑞瓦特】儲能系統(tǒng)中風(fēng)冷和液冷的八大區(qū)別

    儲能系統(tǒng)中風(fēng)冷和液冷的八大區(qū)別 儲能系統(tǒng)是構(gòu)建新型電力系統(tǒng)的關(guān)鍵支撐,它可以將電能轉(zhuǎn)化為化學(xué)能進行儲存,以便在需要時釋放出來。目前,風(fēng)冷和液冷是儲能系統(tǒng)中常用的兩種散熱方式。本文將對風(fēng)冷和液冷的區(qū)別
    的頭像 發(fā)表于 05-08 17:15 ?1117次閱讀
    【古瑞瓦特】儲能系統(tǒng)中風(fēng)冷和液冷的<b class='flag-5'>八大區(qū)別</b>
    主站蜘蛛池模板: 国产精品美女久久久久浪潮AV | 性色AV乱码一区二区三区视频 | YELLOW高清在线观看2019 | 欧美日韩精品一区二区三区四区 | 偷拍 自怕 亚洲 在线 | 3d在线看小舞被躁视频 | 动漫在线观看免费肉肉 | 奇米网一区二区三区在线观看 | 国产普通话精品久久 | 黄色小说男男 | 日本乱子人伦在线视频 | 狠狠色丁香久久婷婷综合_中 | 扒开美女嫩bbb | 伦理片午夜在线视频 | 午夜不卡av免费 | 成人毛片手机版免费看 | 99久久免费精品国产免费 | 处 女 开 破小说 | 色偷偷亚洲男人天堂 | 久久精品热99看二 | 菠萝视频高清版在线观看 | 精品久久久久久久国产潘金莲 | 亚州AV中文无码乱人伦在线 | 九九精品视频一区二区三区 | 体育生爆操 | 亚洲无人区码二码三码区别图 | 久久热r在线视频精品 | 亚洲免费无l码中文在线视频 | 国内精品自产拍在线少密芽 | 色哦色哦哦色天天综合 | 曰本真人00XX动太图 | 国产成人精品综合在线观看 | 久草视频在线观看免费4 | 美丽的姑娘BD在线观看 | 无码欧美喷潮福利XXXX | 中文字幕福利视频在线一区 | 美女扒开腿让男生桶爽免费APP | 在线视频中文字幕 | 狠狠色狠色综合曰曰 | 97超视频在线观看 | 国产成人精品综合久久久 |

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會員交流學(xué)習(xí)
    • 獲取您個性化的科技前沿技術(shù)信息
    • 參加活動獲取豐厚的禮品