簡介：Hybrid App（混合模式移動應用）開發是指介於Web-app、Native-App這兩者之間的一種開發模式，兼具「Native App 良好使用者互動體驗的優勢」和「Web App 跨平臺開發的優勢」。很多人都知道，React Native 是 Facebook 開源的框架，可以直接用 Javascript 開發原生的APP，本文則會圍繞開發中的具體實踐問題進行討論。

此前，我們在多篇文章中提到過 React Native，本次移動精英開發俱樂部又專門圍繞 Hybrid App 和 React Native 進行更加深入的討論，希望能夠給我們的開發者同學，提供一些建議。文章系朱雅麗整理， IT 運維管理平臺

主持人－東輝：大家好，今天我們的主題是 Hybrid App 和 React Native，歡迎大家踴躍進行發言。

陳偉鵬－雅特iOS：我想知道用了 React Native 的同學，對這種技術的態度和評價？

郭鐙鴻：貌似攜程、平安科技還有天貓都在使用 React Native，說明還是有市場的。

主持人－東輝：React Native 在 Android 上的表現貌似不太好，坑比較多吧？

龍蝦：React Native 的首次載入很慢，有快取就好一些，其他的還可以，落地的難度就是不知道該客戶端開發做，還是前端做。

郭鐙鴻：React Native 有效解決了H5的性功能障礙問題，這點很不錯。就像 React Native 的理念：leaReact Native once, write anywhere .

James：個人理解，React Native 的推出應該是為了統一移動端的開發模式。

羅飛：大家可以分享一下自己公司用 Hybrid 或 React Native 的現狀，都是怎麼用的？

利炳根：現狀就是：大部分都可以用 React Native 做完，只有少部分需要原生支援。當然，也和我們的專案有關。因為我們現在做得功能都比較簡單，我們主要工作都在處理一個問題：一個平臺上顯示好好的東西，同樣的程式碼，在另一個平臺上，就不行了。然後還有就是對不同的螢幕的適配，目前還沒遇到特別難的東西，今天看看有沒有人用來做大型成熟專案？學習一下經驗。

Rory He：React Native 需要技術的學習成本其實更高一些。

frankphper：前端是不是因為 React Native 才變成「錢」端？

其實，移動 APP 開發領域，要極致體驗釋出就不靈活（Native），要靈活釋出就沒有極致體驗（H5）。有沒有一種技術方案可以兼顧極致的體驗和靈活的釋出？ LuaView 可以完美解決上述兩個問題，不過需要學習 lua 語言。

主持人－東輝：大家也可以說實踐、使用場景以及收益等問題。

Kiss小錦：使用場景一般是電商做大促活動需要靈活上線。

杜鵬飛千鋒安卓：直接用 WebView 和普通網頁不更簡單麼？

郭鐙鴻：如果那樣的話，效能和功能都有問題。

Shawn：我認為目前 Hybrid 開發形式有三種：

1.原生開發一部分+H5開發一部分，通過 WebView 橋接；
2. 純 H5 開發，需要本地功能時通過第三方打包工具實現 如 HBuilder+ ；
3. 用 H5 或 JS 開發，但最終編譯成 Native 應用，如 ReactNative、APICloud、Cocos2d-js、Unity3D-js 等。還有種形式是 Webview+Runtime ，一般用在H5遊戲加速，像騰訊 X5 瀏覽器、UC 等都內建了 Runtime；

jia_dongxu：可以用 cordova+ionic angular。v2 優化不少移動端，angular 也要出2了，據說優化移動，不知道 ionic2 和 angular2 正式版效能會不會提高很多？

真哥：不過，ionic 在安卓手機上效能不好。

郭鐙鴻：ionic 有點卡，iOS 相對好些。

Shawn：移動端效能是個問題，傳統的PC 端方案還是不要用在手機上了。

柴明昆：貌似Angular 2.0對Native Apps 的支援和渲染是基於 React Native 的，我們也是某個模組改動需求頻繁，最近正在研究評估使用 React-Native。

James：ionic2 nightly 已經有了，ionic2 完全採用angularjs2 ，用的 typescript es6，在效能會很大改善 。angularjs2 對移動端也進行了優化，React Native 目前應該都是大廠或者小範圍在使用。

真哥：對dom的操作太頻繁，特別是雙向資料繫結，不太現實。如果你需要快速迭代，可以考慮React Native，如果特別注重體驗和效能，建議用原生。

利炳根：前段時間，有外包公司專門推 React Native，號稱基本的東西都已經封裝了一遍，如果真的能做到他們宣稱的那個程度，開發一般的 APP 超級快。很多一般的 APP，核心的競爭力是業務上的，對 APP 本身倒是不在乎，怎麼快怎麼來。當然，大家未必樂意做這類開發。

之前有公司，做了一年快速迭代，找到了真的有使用者願意用的業務，才開始優化的，一開始優化，優化完發現沒人用，就是個悲劇。

竇靜軒：關鍵是需要自定義，還是需要 Native 開發，所以不會出現誰替代誰。想跑起來一個React Native 的專案沒那麼容易，還需要基本的 Node 知識 。

我麻不拿到溫網冠軍就不改名字：這樣會不會導致大部分公司願意用 React Native，從而減少開發成本？

利炳根：當然，這是公司的悲劇，開發人員倒是無所謂的，公司倒了可以去下一家，反正自己技術練到了。我們兩天前來的新同事，已經負責 React Native 的動畫開發了，總得來說，上手還是很容易的。

Shawn：也就是說大公司追求使用者體驗，如果不計成本和開發效率的話，還是會用原生來做。

真哥：React Native 也屬於一種開發模式了，其實優缺點很明顯，React Native 只能呼叫原生介面，但是不能對原生做擴充套件，要做擴充套件只能寫 Native，React Native 比 ionic1 好一點，不過現在學習 ionic2 或者 angular2 需要去看看 typescript。

jia_dongxu：React Native 的缺點，Android 體驗太差了，非常卡。

利炳根：卡的問題，需要把開發模式關了，會好非常多，然後，頁面還是可以適當優化一下的。

竇靜軒：如果說有一批人，把市面上流行的元件的都封裝了， 並且開源了，那樣推廣的速度也會很快。

我麻不拿到溫網冠軍就不改名字：就是說如果需要自定義控制元件的時候，React Native 做不到？

真哥：是的，React Native 不能做介面開發。

竇靜軒：React Native 提供自定義元件的方法，需要 Native 自己開發。

利炳根：把原生封一層給 React Native 用，安卓不是很瞭解，iOS 這塊是非常簡單的。當然也可能是因為我做的功能比較簡單。

柴明昆：React Native 在使用 View 的時候，這些 View 是要經過本地定製的，並且將相關方法暴露給 JS ，這樣 JS 端才能正常使用。

張春明：React Native 是否採用？我一般這麼想：能否達到快速迭代，可以適應產品的各種變態修改(控制元件修改)，有問題容易追蹤定位，現階段更傾向於混合開發，然後各取所需。

Shawn：所以說目前還沒有一套完美的方案，也就是說需要原生來做的，我們就用原生好了，H5 優勢的地方就用 H5，這才叫混合開發嘛！

郭鐙鴻：React Native 在效能和功能上是沒有問題的，主要學習曲線比較陡峭，會用的人少。

竇靜軒：Hybrid 受限於 WebView 啊，WebView 如果有 Bug 你沒轍啊。

龍志輝：天貓的部分業務不是已經用 React Native 改造了嗎？

郭鐙鴻：天貓對 React Native 進行了封裝。

柴明昆：如果沒記錯的話，QQ 空間的發現模組，就是用的 React Native。

真哥：用什麼技術既不影響效能，又達到了功能和提高使用者體驗？

竇靜軒：我覺得用啥在於開發者決策，如果你為了一個廣告活動頁，去弄 React Native 和Hybrid ，真心不如一個 WebView H5 原生去搞。我是15年趟了一年 Hybrid 的坑，16開始趟React Native 的坑了。

龍志輝：本地加毛玻璃吧！其實程式設計的思路是一樣的，React Native 或者 Hybrid 主要目的很多時候是為了突破客戶端稽核限制和達到程式碼複用的目的，避免一個相同的業務寫三份程式碼（Android，iOS，Web）。

郭鐙鴻：我發現12306用的動態庫也繞開了蘋果的稽核。

真哥：其實我覺得 React Native 更像一種思想 ，並不只是代表一個框架，學習框架主要是學習作者的思想， 就比如 angular 。

竇靜軒：對，是思想，元件式開發。

我麻不拿到溫網冠軍就不改名字：我覺得 React Native 做某些模組還行，但是如果說完全來代替原生，我覺得是不是太快誇張了？

真哥：其實都是 MVVM，替代不了，只是說能夠在相對短的時間沒做出接近同等效果對效能影響又不大，「分久必合，合久必分」，現在完全被推翻了，如果統一的話，也許就不會有這麼多新的想法了。

龍志輝－iOS：每年 iOS 和 Android 系統更新都會開放一大票新的API，用第三方的始終會慢半拍，效能和使用者體驗在客戶端是放在首位的。

Shawn：你看 Cocos2d 支援 JS 吧，Unity3d 官方推薦用 JS 吧，雖說目前 JS 面向物件不太徹底，你看 ECMAScript6 也發不了，JS 用起來就更爽了，關鍵是 React Native 預設支援 ES6。

湯濤：我覺得 React Native 或者 Hybrid 方案，適用於強運營類的產品，比如電商類，工具類這種暫時沒必要，大家選擇技術方案時可以參考。

龍志輝－iOS：不知道微信的應用號會使用什麼技術？React Native？

James：微信的應用號用 JS，而且微信有 WebView。

龍志輝－iOS：那還是 Hybrid 啊，如果微信也把 JS 框架開源了，就是第二個 React Native 了。

Shawn：騰訊不會棄標準於不顧的，微信應用號絕對是 H5 崛起的時候。

龍志輝－iOS：其實我覺得 React Native 有點像 Cocos2d-x，把各個平臺的元件封裝一套，用C++一次編寫，就可以移植到各個平臺了。

羅飛：非常感謝大家的討論，由於時間的原因，今天的討論到此為止。後續我們還可以再進行更多的交流，再次感謝大家。

國內 ITOM 管理平臺 OneAPM 致力於幫助企業使用者提供全棧式的效能管理以及 IT 運維管理服務，通過一個探針就能夠完成日誌分析、安全防護、APM 基礎元件監控、整合報警以及大資料分析等功能。想閱讀更多優秀文章，請訪問 OneAPM 官方技術部落格