當前位置:編程學習大全網 - 網絡軟體 - vue和react的區別之我見

vue和react的區別之我見

react和vue都是做組件化的,整體的功能都類似,但是他們的設計思路是有很多不同的。使用react和vue,主要是理解他們的設計思路的不同。

react整體是函數式的思想,把組件設計成純組件,狀態和邏輯通過參數傳入,所以在react中,是單向數據流,推崇結合immutable來實現數據不可變。react在setState之後會重新走渲染的流程,如果shouldComponentUpdate返回的是true,就繼續渲染,如果返回了false,就不會重新渲染,PureComponent就是重寫了shouldComponentUpdate,然後在裏面作了props和state的淺層對比。

而vue的思想是響應式的,也就是基於是數據可變的,通過對每壹個屬性建立Watcher來監聽,當屬性變化的時候,響應式的更新對應的虛擬dom。

總之,react的性能優化需要手動去做,而vue的性能優化是自動的,但是vue的響應式機制也有問題,就是當state特別多的時候,Watcher也會很多,會導致卡頓,所以大型應用(狀態特別多的)壹般用react,更加可控。

react的思路是all in js,通過js來生成html,所以設計了jsx,還有通過js來操作css,社區的styled-component、jss等,

vue是把html,css,js組合到壹起,用各自的處理方式,vue有單文件組件,可以把html、css、js寫到壹個文件中,html提供了模板引擎來處理。

react是類式的寫法,api很少,

而vue是聲明式的寫法,通過傳入各種options,api和參數都很多。所以react結合typescript更容易壹起寫,vue稍微復雜。

react可以通過高階組件(Higher Order Components--HOC)來擴展,而vue需要通過mixins來擴展

壹個react高階組件的例子:

react做的事情很少,很多都交給社區去做,vue很多東西都是內置的,寫起來確實方便壹些,

比如 redux的combineReducer就對應vuex的modules,

比如reselect就對應vuex的getter和vue組件的computed,

vuex的mutation是直接改變的原始數據,而redux的reducer是返回壹個全新的state,所以redux結合immutable來優化性能,vue不需要。

上面主要梳理了react和vue的4點不同:

(其中第3點在vue3.0支持類式寫法之後就可以去掉了)

react整體的思路就是函數式,所以推崇純組件,數據不可變,單向數據流,當然需要雙向的地方也可以做到,比如結合redux-form,而vue是基於可變數據的,支持雙向綁定。react組件的擴展壹般是通過高階組件,而vue組件會使用mixin。vue內置了很多功能,而react做的很少,很多都是由社區來完成的,vue追求的是開發的簡單,而react更在乎方式是否正確。

  • 上一篇:nero怎麽刻盤?
  • 下一篇:教師的活動總結
  • copyright 2024編程學習大全網