Weex 和 React Native 的比較看這裏

寫在前面

• 目前主流的應用大致分紅三類：Native App, Web App, Hybrid App.

• Native App 特色:
  • 性能好
  • 完美的用戶體驗
  • 開發成本高，沒法跨平臺
  • 升級困難 (審覈), 維護成本高

• Web App 特色:

  • 開發成本低, 更新快, 版本升級容易, 自動升級
  • 跨平臺，Write Once , Run Anywhere
  • 沒法調用系統級的 API
  • 臨時入口，用戶留存度低
  • 性能差, 體驗差, 設計受限制
  • 相比 Native App，Web App 體驗中受限於以上 5 個因素：網絡環境，渲染性能，平臺特性，受限於瀏覽器，系統限制。

• Hybrid App 特色:

  • Native App 和 Web App 折中的方案，保留了 Native App 和 Web App 的優勢。
  • 可是仍是性能差。頁面渲染效率低，在 Webview 中繪製界面，實現動畫，資源消耗都比較大, 受限於技術, 網速等因素

• 爲了解決上述問題, 一套高效率, 高性能的跨平臺方案成爲了你們熱衷的話題, 也就有了下面要比較的 weex 和 react native.

基本概念

---

weex

• 簡介:
  weex 是阿里巴巴公司與 2016 年 6 月開源的一種用於構建移動跨平臺的 UI 框架
• 特色:
  • 1.Lightweight: 輕量級, 語法簡單, 易於使用
  • 2.Extendable: 可擴展, 豐富內置組件, 可擴展的 API,
  • 3.High Performance: 高性能
  • 核心理念:
  • Write Once Run Everywhere
  • 基於 JS 開發框架:
  • weex 基於 vue.js

React Native

• 簡介:
  • Facebook 在 2015 年 3 月在 F8 開發者大會上開源的跨平臺 UI 框架
• 核心理念:LEARN ONCE, WRITE ANYWHERE
• 基於 JS 開發框架:
  • React Native 基於 React

知識拓展:vue.js 和 React

Vue:

• 是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件.

React:

• 基於 HTML 的前端界面開發正變得愈來愈複雜，其本質問題基本均可以歸結於如何未來自於服務器端或者用戶輸入的動態數據高效的反映到複雜的用戶界面上。而來自 Facebook 的 React 框架正是徹底面向此問題的一個解決方案，按官網描述，其出發點爲：用於開發數據不斷變化的大型應用程序。相比傳統型的前端開發，React 開闢了一個至關另類的途徑，實現了前端界面的高效率高性能開發。

Vue.js 和 React 的異同:

• 相同點:
  • React.js 和 Vue.js 它們都提供數據驅動、可組合搭建的視圖組件。
• 不一樣點:
  • 1. 內部實現本質上不一樣:
    • React 的渲染創建在 Virtual DOM 上——一種在內存中描述 DOM 樹狀態的數據結構。當狀態發生變化時，React 從新渲染 Virtual DOM，比較計算以後給真實 DOM 打補丁。
    • Vue.js 不使用 Virtual DOM 而是使用真實 DOM 做爲模板，數據綁定到真實節點。Vue.js 的應用環境必須提供 DOM。可是，相對於常見的誤解——Virtual DOM 讓 React 比其它的都快， Vue.js 實際上性能比 React 好，並且幾乎不用手工優化.
  • 2. 在 API 方面:
    • React（或 JSX）的一個問題是，渲染函數經常包含大量的邏輯，最終看着更像是程序片段（實際上就是）而不是界面的視覺呈現。
    • Vue.js 經過在模板中加入一個輕量級的 DSL (指令系統)，換來一個依舊直觀的模板，且能將邏輯封裝進指令和過濾器中。

更多 Vue 和 React 的區別

Weex 和 React Native 的異同

---

相同點:

• 都採用 Web 的開發模式，使用 JS 開發；
• 均可以直接在 Chrome 中調試 JS 代碼；
• 都支持跨平臺的開發；
• 均可以實現 hot reload，邊更新代碼邊查看效果；

不一樣點:

JS 引擎

什麼是 JS 引擎

• weex 在 iOS 上使用 JSCore 而在安卓上使用了 V8
• ReactNative 使用 JSCore

學習成本

• 1. 環境配置：
  • ReactNative 須要按照文檔安裝配置不少依賴的工具，相對比較麻煩。 weex 安裝 cli 以後就可使用
• 2.vue vs react: 上面已經作過對比
  • react 模板 JSX 學習使用有必定的成本 vue 更接近經常使用的 web 開發方式，模板就是普通的 html，數據綁定使用 mustache 風格，樣式直接使用 css

易用性

• 1.sdk 使用
  • ReactNative 須要解決 mvn 依賴的問題，所以必須本身修改源碼，打包發佈
  • weex 能夠直接在 mvn 項目中使用
• 2. 調試
  • 均可以在 chrome 中調試 JS 代碼
  • weex 支持在 chrome 中預覽頁面 dom 節點，ReactNative 不支持
• 3. 頁面開發
  • weex 提供了一個 playground，能夠方便的預覽正在開發的頁面
  • ReactNative 開發一個頁面，須要創建一個 native 工程，而後編譯運行
• 4. 即時預覽
  • weex 和 ReactNative 都有提供 hot reload 功能，能夠邊更改代碼，邊在手機上看到效果
• 5. 跨平臺
  • ReactNative 支持 Android iOS 兩個平臺，須要本身擴展去支持 web，windows 和 node-webkit 的支持正在開發中
  • weex 能夠支持 Android iOS web 三個平臺

性能

• 1. 分包加載
  • ReactNative 須要本身實現，從而優化 JS 加載執行時間
  • weex 默認提供分包實現
• 2. 官方支持
  • ReactNative 官方關注的重心目前並不在性能上
  • weex 持續關注性能優化
• 3. 大塊 view 渲染
  • ReactNative 默認沒有優化機制，長 view 渲染性能會比較差
  • weex 提供了 node 和 tree 兩種渲染模式，優化長 view 的渲染

擴展性

• ReactNative: 全部 RN 的 native 底層，都是一個個的模塊 Module，徹底解耦，隨意靈活擴展插拔移除，並且支持開發者自行構建徹底本身的 Module，不管是界面仍是數據網絡接口。
• 三方庫的接入上，weex 對網絡，圖片，統計等常見的用戶可能想本身定製的功能，提供了相應的適配接口，能夠由用戶方便的定製，ReactNative 須要本身修改源碼

社區支持

• Weex 開源較晚，互聯網上相關資料還比較少，社區規模較小；
• React Native 社區則比較活躍，能夠參考的項目和資料也比較豐富

一張圖: 從渲染時間, 內存使用,CPU 佔用, 幀率 (圖形處理器每秒鐘可以刷新幾回, 高的幀率能夠獲得更流暢、更逼真的動畫。每秒鐘幀數 （fps） 愈多，所顯示的動做就會愈流暢。)

文章推薦

---

weex vs react-native
Weex & ReactNative & JSPatch
Weex 和 react native 對比
對無線電商動態化方案的思考（一）系列文章

結語:

---

• 因爲公司要作跨平臺開發, 將學習對比這個任務交給了我, 所以上網查了不少文章, 雖然從網上看了不少對比, 有人說 weex 比 react native 更加容易上手, 但我感受對於一個初學者 (本人 ios 開發) 的我參考項目和資料是至關重要的,weex 相對下網上學習資料比較少, 社區規模也比較小, 若是碰見問題怎麼辦, 因此我的比較傾向於 React Native, 可是各有千秋, 你們也會有本身的見解.

做者：wyw89500
連接：https://hacpai.com/article/1483079384055
來源：黑客派
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。