亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

vue與react的區別有哪些

沐橙
275
2021-05-19 18:48:39
欄目: 編程語言

vue與react的區別:1、vue與react兩者監聽數據變化的實現原理不同;2、vue能夠支持雙向綁定,而react不能支持;3、vue組合不同功能的方式是通過mixin,而react則是HoC高階組件實現;4、在組件通信中子組件向父組件傳遞消息時,vue傾向于使用事件,而react中都是使用回調函數;5、模板渲染方式的不同,vue通過html語法進行渲染,而react則是通過JSX渲染模板;6、渲染過程中vue會跟蹤每一個組件的依賴關系進行渲染不需要重新渲染整個組件樹,而react中狀態被改變時,所有子組件都需要重新渲染;7、框架本質不同,vue屬于MVVM框架,而react屬于前端組件化框架;8、vue的數據是可變的,而react則是不可變的。

vue與react的區別有哪些

具體分析如下:

1.監聽數據變化的實現原理不同

Vue通過 getter/setter以及一些函數的劫持,能精確知道數據變化。

React默認是通過比較引用的方式(diff)進行的,如果不優化可能導致大量不必要的VDOM的重新渲染。為什么React不精確監聽數據變化呢?這是因為Vue和React設計理念上的區別,Vue使用的是可變數據,而React更強調數據的不可變,兩者沒有好壞之分,Vue更加簡單,而React構建大型應用的時候更加魯棒。

2.數據流的不同

Vue1.0中可以實現兩種雙向綁定:父子組件之間,props可以雙向綁定;組件與DOM之間可以通過v-model雙向綁定。Vue2.x中去掉了第一種,也就是父子組件之間不能雙向綁定了(但是提供了一個語法糖自動幫你通過事件的方式修改),并且Vue2.x已經不鼓勵組件對自己的 props進行任何修改了。

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

3.HoC和mixins

Vue組合不同功能的方式是通過mixin,Vue中組件是一個被包裝的函數,并不簡單的就是我們定義組件的時候傳入的對象或者函數。比如我們定義的模板怎么被編譯的?比如聲明的props怎么接收到的?這些都是vue創建組件實例的時候隱式干的事。由于vue默默幫我們做了這么多事,所以我們自己如果直接把組件的聲明包裝一下,返回一個HoC,那么這個被包裝的組件就無法正常工作了。

React組合不同功能的方式是通過HoC(高階組件)。React最早也是使用mixins的,不過后來他們覺得這種方式對組件侵入太強會導致很多問題,就棄用了mixinx轉而使用HoC。高階組件本質就是高階函數,React的組件是一個純粹的函數,所以高階函數對React來說非常簡單。

4.組件通信的區別

Vue中有三種方式可以實現組件通信:父組件通過props向子組件傳遞數據或者回調,雖然可以傳遞回調,但是我們一般只傳數據;子組件通過事件向父組件發送消息;通過V2.2.0中新增的provide/inject來實現父組件向子組件注入數據,可以跨越多個層級。

React中也有對應的三種方式:父組件通過props可以向子組件傳遞數據或者回調;可以通過 context 進行跨層級的通信,這其實和 provide/inject 起到的作用差不多。React 本身并不支持自定義事件,而Vue中子組件向父組件傳遞消息有兩種方式:事件和回調函數,但Vue更傾向于使用事件。在React中我們都是使用回調函數的,這可能是他們二者最大的區別。

5.模板渲染方式的不同

在表層上,模板的語法不同,React是通過JSX渲染模板。而Vue是通過一種拓展的HTML語法進行渲染,但其實這只是表面現象,畢竟React并不必須依賴JSX。

在深層上,模板的原理不同,這才是他們的本質區別:React是在組件JS代碼中,通過原生JS實現模板中的常見語法,比如插值,條件,循環等,都是通過JS語法實現的,更加純粹更加原生。而Vue是在和組件JS代碼分離的單獨的模板中,通過指令來實現的,比如條件語句就需要 v-if 來實現對這一點,這樣的做法顯得有些獨特,會把HTML弄得很亂。

舉個例子,說明React的好處:react中render函數是支持閉包特性的,所以我們import的組件在render中可以直接調用。但是在Vue中,由于模板中使用的數據都必須掛在 this 上進行一次中轉,所以我們import 一個組件完了之后,還需要在 components 中再聲明下,這樣顯然是很奇怪但又不得不這樣的做法。

6.渲染過程不同

Vue可以更快地計算出Virtual DOM的差異,這是由于它在渲染過程中,會跟蹤每一個組件的依賴關系,不需要重新渲染整個組件樹。

React在應用的狀態被改變時,全部子組件都會重新渲染。通過shouldComponentUpdate這個生命周期方法可以進行控制,但Vue將此視為默認的優化。

如果應用中交互復雜,需要處理大量的UI變化,那么使用Virtual DOM是一個好主意。如果更新元素并不頻繁,那么Virtual DOM并不一定適用,性能很可能還不如直接操控DOM。

7.框架本質不同

Vue本質是MVVM框架,由MVC發展而來;

React是前端組件化框架,由后端組件化發展而來。

8.Vuex和Redux的區別

從表面上來說,store注入和使用方式有一些區別。在Vuex中,$store被直接注入到了組件實例中,因此可以比較靈活的使用:使用dispatch、commit提交更新,通過mapState或者直接通過this.$store來讀取數據。在Redux中,我們每一個組件都需要顯示的用connect把需要的props和dispatch連接起來。另外,Vuex更加靈活一些,組件中既可以dispatch action,也可以commit updates,而Redux中只能進行dispatch,不能直接調用reducer進行修改。

從實現原理上來說,最大的區別是兩點:Redux使用的是不可變數據,而Vuex的數據是可變的,因此,Redux每次都是用新state替換舊state,而Vuex是直接修改。Redux在檢測數據變化的時候,是通過diff的方式比較差異的,而Vuex其實和Vue的原理一樣,是通過getter/setter來比較的,這兩點的區別,也是因為React和Vue的設計理念不同。React更偏向于構建穩定大型的應用,非常的科班化。相比之下,Vue更偏向于簡單迅速的解決問題,更靈活,不那么嚴格遵循條條框框。因此也會給人一種大型項目用React,小型項目用Vue的感覺。

0
微博| 桃源县| 东丽区| 南岸区| 蓝田县| 临沧市| 永福县| 肇东市| 无极县| 陆丰市| 禹城市| 台南市| 连城县| 克拉玛依市| 壤塘县| 调兵山市| 大足县| 同心县| 宁国市| 鹤山市| 仲巴县| 亚东县| 芮城县| 牡丹江市| 安吉县| 赣榆县| 克东县| 武陟县| 会昌县| 固镇县| 虎林市| 额敏县| 六枝特区| 屯昌县| 达孜县| 大关县| 永善县| 珠海市| 肥东县| 西乌| 桐城市|