Vue與React比較
阿新 • • 發佈:2019-05-14
合作開發 書寫 添加 關聯 必須 程序 true 一個 outer 與React
相似:
(1)虛擬DOM(Virtual DOM)
虛擬DOM的誕生是基於:改變真實的DOM狀態遠比改變一個JS對象的花銷要大的多。
虛擬DOM是一個映射真實DOM的JS對象,當有變化產生時,就會創建一個新的虛擬DOM對象,計算新舊Virtual DOM的差別,然後把這些差別應用在真實的DOM上。
虛擬DOM的本質是嵌套著數組的原生對象,當新一項被加進當前JavaScript對象時,一個函數會計算新舊Virtual DOM的差異且反應在真實的DOM上。高性能框架提供了計算這些差異的算法。(核心)
Vue在渲染過程中會跟蹤每一個組件的依賴關系,不需要重新對整個組件樹渲染,Vue默認進行了優化;
React每當應用的狀態被改變時,全部子組件都會重新渲染,可以通過shouldComponentUpdate(一種生命周期方法)來進行控制,以避免不必要的渲染開銷。
(2)可視化組件
組件化應用:把一個應用拆分成功能明確的模塊,每個模塊之間通過某種方式互相關聯
(3)都提供了路由和狀態管理模塊
不同:
(1)模板與JSX
最大的區別是模板不同,Vue模板近似常規的HTML,使用HTML模板進行渲染,把html、css、js組合到一起,用各自的處理方式,提供了模板引擎處理
React推薦使用JSX--一種JS語法擴展(JS混雜著XML語法),使用編程思維書寫模板,思路是all in js,用JS生成html,用JS操作css;JSX實際是React對HTML的封裝
(2)對象屬性 vs 狀態管理
Vue中state不是必須存在的,數據由data屬性在Vue對象中管理,data可以保存數據;vuex是大型復雜應用的狀態管理方案;每一個 Vuex 應用的核心就是 store(倉庫)。“store”基本上就是一個容器,它包含著你的應用中大部分的狀態;
Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那麽相應的組件也會相應地得到高效更新。
React的state對象在應用中不可變,需要使用setState()方法更新;React中的Redux被設計為管理一個全局state對象/Flux
(3)React Native 與 WEEX
React Native能在手機上創建原生應用;
Vue後與阿裏合作開發Weex;
(4)擴展
在路由庫的問題上,React 選擇把問題交給社區維護,因此創建了一個更分散的生態系統。但相對的,React 的生態系統相比 Vue 更加繁榮。
react中,需要引入react-router庫,使用時,路由器Router就是React的一個組件。Router組件本身只是一個容器,真正的路由要通過Route組件定義,Route組件定義了URL路徑與組件的對應關系。你可以同時使用多個Route組件。
Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的;使用 Vue.js ,我們已經可以通過組合組件來組成應用程序,當你要把 vue-router 添加進來,我們需要做的是,將組件(components)映射到路由(routes),然後告訴 vue-router 在哪裏渲染它們。
Vue與React比較