【Qnext大會】React Web——瀏覽器端複用React Native代碼解決方案

轉自：http://www.sohu.com/a/117465103_505779

 

自2008年開始接觸前端，至今已有8年的前端開發經驗，是一名資深前端攻城獅。目前在去哪兒平臺事業部前端架構組。

1 背景

一直以來，移動開發的肩上扛着iOS、Android、Touch三座大山，一個應用須要維護三套代碼，面臨開發慢迭代慢成本高的問題。如何可以提高效率、快速開發及迭代?

幾年前，大牛們推出Write Once Run Anywhere概念基於WebView的ybrid的應用解決方案，可使用HTML、CSS、Java構建多端app，極大的提高了開發效率，可是始終存在沒法突破的反應慢、性能差的瓶頸。

Facebook近期推出倡導Learn Once Write Anywhere理念的React Native，他提供了一套基於Java的，構建性能一流原生APP的解決方案，極大下降了開發人員的學習和使用成本，單憑Java就可搞定Android和iOS。

剩下的問題就是React Native是沒覆蓋到Touch，如何實現Write Once Run Anywhere，React Native代碼能不能直接運行在瀏覽器上？

2 實現機制

咱們團隊在React Native上深度定製【Qunar React Native】，新增了許多組件和API，在框架層面抹平了iOS和Android的平臺差別，使得主要的業務邏輯能夠在無需修改的狀況下，無差別的運行於 iOS和 Android 平臺。

對應的，咱們也設想推出一套框架，抹平Native和Web的平臺差別，力求實現業務邏輯在瀏覽器上也是能夠無差別運行——這就是React Web。

React Web的設計思路就是經過在瀏覽器斷如出一轍的補齊React Native的組件和API，使得業務代碼經過構建工具，分別構建出支持Native和Web的版本，從而實現業務代碼的複用。

3 React Web的優點

內置 - React web內置在 React Native內，建立一個項目，不須要區分Native和Web，只安裝一個react-native node_module便可。

完成度高 – React Web高度實現了React Native、Qunar React Native的幾乎全部組件和API，而且業務組件庫react-natie-ui的十幾個組件也能夠不作任何修改直接複用在Native和Web平臺。

兼容性-React Web的高完成度，保證了Web和Native平臺的高度兼容，確保了一套代碼、多端運行；此外，React Web在Web端，測試了主流，包含Chrome、QQ、Safari、Android原生、UC、360、百度、微信X五、Hy內置WebView等瀏覽器，確保在框架層面解決了瀏覽器兼容性問題。

調優-React Web一直在持續的進行性能優化，包括動畫、事件響應方面的性能優化；而且提供統一的抽離的公用庫CDN來提高頁面加載性能及項目構建效率；此外，React Web還內置了一些輔助工具如數據mock中間件等來提高使用體驗。

4 使用與示例

長按二維碼可查看使用與示例

5 總結

React Web提供了一套快速低成本複用React Native代碼的解決方案，會極大的提高開發效率。經過持續的優化以及用戶設備性能的不斷提高，React Web的優點將愈發明顯，愈發值得嘗試。

歡迎勾搭，提問、建議和貢獻代碼。

歡迎關注Qunar技術沙龍

學習須要點滴積累返回搜狐，查看更多

聲明：本文由入駐搜狐號的做者撰寫，除搜狐官方帳號外，觀點僅表明做者本人，不表明搜狐立場。