【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技术沙龙

学习须要点滴积累返回搜狐，查看更多

声明：本文由入驻搜狐号的做者撰写，除搜狐官方帐号外，观点仅表明做者本人，不表明搜狐立场。