寫在前面
- 目前主流的應用大體分成三類：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 (指令系統)，換來一個依舊直觀的模板，且能將邏輯封裝進指令和過濾器中。
- 1. 內部實現本質上不同:
Weex 和 React Native 的異同
相同點:
- 都采用 Web 的開發模式，使用 JS 開發；
- 都可以直接在 Chrome 中調試 JS 代碼；
- 都支持跨平台的開發；
- 都可以實現 hot reload，邊更新代碼邊查看效果；
不同點:
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
來源：黑客派
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。