關于Vue和React區(qū)別的一些筆記

作者:lihongxun945

github.com/lihongxun945/myblog/issues/21

這篇文章記錄我在使用Vue和React的時候侦镇,對他們的不同之處的一些思考,不僅局限于他們本身织阅,也會包括比如?Vuex/Redux?等經(jīng)常搭配使用的工具壳繁。因為涉及到的內容很多,可能下面的每一個點都能寫成一篇文章,這次先簡單做一個概要闹炉,等我有空做一個詳細的專題出來蒿赢。

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

Vue 通過?getter/setter?以及一些函數(shù)的劫持,能精確知道數(shù)據(jù)變化渣触,不需要特別的優(yōu)化就能達到很好的性能

React 默認是通過比較引用的方式進行的羡棵,如果不優(yōu)化(PureComponent/shouldComponentUpdate)可能導致大量不必要的VDOM的重新渲染

為什么 React 不精確監(jiān)聽數(shù)據(jù)變化呢?這是因為 Vue 和 React 設計理念上的區(qū)別嗅钻,Vue 使用的是可變數(shù)據(jù)皂冰,而React更強調數(shù)據(jù)的不可變。所以應該說沒有好壞之分养篓,Vue更加簡單秃流,而React構建大型應用的時候更加魯棒。

因為一般都會用一個數(shù)據(jù)層的框架比如?Vuex?和?Redux柳弄,所以這部分不作過多解釋舶胀,在最后的?vuex 和 redux的區(qū)別?中也會講到。

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

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

父子組件之間御吞,props?可以雙向綁定

組件與DOM之間可以通過?v-model?雙向綁定

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

所以現(xiàn)在我們只有?組件 <--> DOM?之間的雙向綁定這一種。

然而 React 從誕生之初就不支持雙向綁定碉纺,React一直提倡的是單向數(shù)據(jù)流船万,他稱之為?onChange/setState()模式。

不過由于我們一般都會用?Vuex?以及?Redux?等單向數(shù)據(jù)流的狀態(tài)管理框架骨田,因此很多時候我們感受不到這一點的區(qū)別了耿导。

HoC 和 mixins

在 Vue 中我們組合不同功能的方式是通過 mixin,而在React中我們通過 HoC (高階組件)态贤。

React 最早也是使用?mixins?的舱呻,不過后來他們覺得這種方式對組件侵入太強會導致很多問題,就棄用了 mixinx 轉而使用?HoC悠汽,關于mixin究竟哪里不好箱吕,可以參考React官方的這篇文章?Mixins Considered Harmful

而 Vue 一直是使用 mixin 來實現(xiàn)的。

為什么 Vue 不采用 HoC 的方式來實現(xiàn)呢柿冲?

高階組件本質就是高階函數(shù)茬高,React 的組件是一個純粹的函數(shù),所以高階函數(shù)對React來說非常簡單假抄。

但是Vue就不行了怎栽,Vue中組件是一個被包裝的函數(shù)丽猬,并不簡單的就是我們定義組件的時候傳入的對象或者函數(shù)。比如我們定義的模板怎么被編譯的熏瞄?比如聲明的props怎么接收到的脚祟?這些都是vue創(chuàng)建組件實例的時候隱式干的事。由于vue默默幫我們做了這么多事强饮,所以我們自己如果直接把組件的聲明包裝一下愚铡,返回一個高階組件,那么這個被包裝的組件就無法正常工作了胡陪。

推薦一篇很棒的文章講的是vue中如何實現(xiàn)高階組件?探索Vue高階組件

組件通信的區(qū)別

其實這部分兩個比較相似沥寥。

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

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

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

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

另外有一些比如訪問?$parent/$children等比較dirty的方式這里就不講了淮野。

在 React 中,也有對應的三種方式:

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

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

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

模板渲染方式的不同

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

React 是通過JSX渲染模板

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

但其實這只是表面現(xiàn)象潭袱,畢竟React并不必須依賴JSX柱嫌。

在深層上,模板的原理不同屯换,這才是他們的本質區(qū)別:

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

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

對這一點,我個人比較喜歡React的做法幕屹,因為他更加純粹更加原生蓝丙,而Vue的做法顯得有些獨特,會把HTML弄得很亂望拖。舉個例子渺尘,說明React的好處:

react中render函數(shù)是支持閉包特性的,所以我們import的組件在render中可以直接調用说敏。但是在Vue中鸥跟,由于模板中使用的數(shù)據(jù)都必須掛在?this?上進行一次中轉,所以我們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,并不能直接調用 reducer 進行修改均驶。

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

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

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

而這兩點的區(qū)別携狭,其實也是因為 React 和 Vue的設計理念上的區(qū)別继蜡。React更偏向于構建穩(wěn)定大型的應用,非常的科班化逛腿。相比之下稀并,Vue更偏向于簡單迅速的解決問題,更靈活单默,不那么嚴格遵循條條框框碘举。因此也會給人一種大型項目用React,小型項目用 Vue 的感覺搁廓。


如有疑問請?zhí)砑游业奈⑿盘枺?8231133236引颈。歡迎交流耕皮!

更多內容,請訪問的我的個人博客:[https://liugezhou.github.io/blog](https://liugezhou.github.io/blog)

您也可以關注我的個人公眾號:【W(wǎng)akaka】

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蝙场,一起剝皮案震驚了整個濱河市凌停,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌售滤,老刑警劉巖罚拟,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異完箩,居然都是意外死亡赐俗,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門弊知,熙熙樓的掌柜王于貴愁眉苦臉地迎上來阻逮,“玉大人,你說我怎么就攤上這事吉捶《嵯剩” “怎么了?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵呐舔,是天一觀的道長币励。 經(jīng)常有香客問我,道長珊拼,這世上最難降的妖魔是什么食呻? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮澎现,結果婚禮上仅胞,老公的妹妹穿的比我還像新娘。我一直安慰自己剑辫,他們只是感情好干旧,可當我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著妹蔽,像睡著了一般椎眯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上胳岂,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天编整,我揣著相機與錄音,去河邊找鬼乳丰。 笑死掌测,一個胖子當著我的面吹牛,可吹牛的內容都是我干的产园。 我是一名探鬼主播汞斧,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼夜郁,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了断箫?” 一聲冷哼從身側響起拂酣,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤秋冰,失蹤者是張志新(化名)和其女友劉穎仲义,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體剑勾,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡埃撵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了虽另。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片暂刘。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖捂刺,靈堂內的尸體忽然破棺而出谣拣,到底是詐尸還是另有隱情,我是刑警寧澤族展,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布森缠,位于F島的核電站,受9級特大地震影響仪缸,放射性物質發(fā)生泄漏贵涵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一恰画、第九天 我趴在偏房一處隱蔽的房頂上張望宾茂。 院中可真熱鬧,春花似錦拴还、人聲如沸跨晴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽端盆。三九已至,卻和暖如春拇厢,著一層夾襖步出監(jiān)牢的瞬間爱谁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工孝偎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留访敌,地道東北人。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓衣盾,卻偏偏與公主長得像寺旺,于是被迫代替她去往敵國和親爷抓。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內容

  • Vue也已經(jīng)升級到2.0版本了阻塑,到現(xiàn)在為止(2016/11/19)比較流行的MVVM框架有AngularJS(也有...
    彬_仔閱讀 27,222評論 12 114
  • 用了一年半的react系蓝撇,由于新公司項目都是vue系的,所以開始學習vue相關框架陈莽。早就聽說vue是angular...
    Coding_Life閱讀 7,941評論 2 10
  • 你愛他時渤昌,多看一眼都是滿足 你不愛時,多觸一次都是嫌棄 到底是他失去了吸引你的魅力 還是你 變了心走搁、斷了情 ...
    涑涼笙閱讀 105評論 0 1
  • 前言:阿爾法圍棋(AlphaGo)是一款圍棋人工智能程序独柑,2016年3月對戰(zhàn)世界圍棋冠軍、職業(yè)九段選手李世石私植,并以...
    有思想的咸魚閱讀 325評論 0 0