1. 程式人生 > >Vue與React比較

Vue與React比較

合作開發 書寫 添加 關聯 必須 程序 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比較