React Native和Weex

Posted on Mar 21, 2017 By Vivian Sun

基本的差异性

两个不错的对比介绍：

感触

  • 跨平台：RN支持android和IOS，Weex支持android/IOS和web三个平台。
    • Weex支持的平台比RN多一种，但是当真正开始写demo的时候却发现，移动端(android/ios)和web端(PC browser)的界面布局有很大的差异性。
    • 如果移动端和web端采用一份code，会很不协调，需要很NB的UI/planner去设计layout才可能fix这种不协调…
    • 他们都只是UI层，涉及到一些硬体功能如back，转屏等情况下都需要和native交互，并没有完全的脱离native code,不过在这方面RN领先Weex很多
  • 性能：和网上的描述一致，Weex比RN好一些。
  • 应用场景：RN的应用场景比较丰富，Weex的应用场景偏阿里系，目前只适合电商展示类，如手淘，对于其他的场景应用很不友好。
  • 学习成本：
    • RN的学习成本比较高，它的JSX语法和JS有一定差异，可能做惯前端的人不会习惯，配置也比较麻烦，需要安装nodejs/git等。
    • Weex基本基于js，配置简单，很容易上手，这点很友好。
  • 调试：都可以基于chrome调试。
    • RN还支持在native上显示error和warning，网上资料比较丰富，各种问题大都可以查询到
    • Weex网上基本没有可查资料，遇到问题只能自己摸索或者提交issue等待…要不就是求助群友。
  • 组件扩展性：Weex几乎没有多少，RN则有很多，两者差异很大。
  • 国际化：问过好几个台北的RD，只知道RN不知道Weex,目前Weex大陆推广的多一些，google上weex也没有多少英文的issue cases.

那些年遇到的坑

RN

  • 配置麻烦，直连设备时需要设定端口。
  • JSX和JS的代码容易混淆，不容易理解，RN支持JS但是推荐JSX
  • 开启chrome 调试时它会有阻塞函数执行的情况。
    • 如在componentWillMount时fetch 某个网址的时候，这里面的response函数会被阻塞，关闭remote js debug就好，因为一般都是开着chrome调试

Weex

  • 组件太少，基本没有多少组件
    • 如同样要实现转屏，RN有react-native-orientation组件(https://github.com/yamill/react-native-orientation)
    • weex直接回复暂时不考虑，默认只支持竖屏(https://github.com/alibaba/weex/issues/1517)
  • 相关学习资料和信息太少，遇到问题很难从网上找到答案，这个会直接影响到开发进度
    • 如它的0.5.2版本直接weex会报babel的一个问题，怎么都没法处理，网上找也没有任何资料，最后求助群友还是降版fix的，它的0.5.2版本直接有问题。
  • 版本发布太快，基本1~2周发布一个版本，很不稳定，如2提到的0.5.2版本。
  • 文档太差，很多细节描述的都很不清楚，看起来很累，而且明明是阿里的，只有英文文档这算是怎么回事？就算是要和国际接轨好歹也同步一个中文的啊~难不成写中文文档比英文的更难？
  • 兼容性问题，虽然号称三端兼容，但是具体的细节内容并没有很好的区分。
    • 如https://github.com/alibaba/weex/issues/1520，询问如何实现类似跳转打开不同的js界面去加载不同的web页面
    • 回复的第一个方案只是reload的页面，并没有实现跳转。
    • 第二个方案<div>则直接是html5的写法，而且只支持PC web端，在PC browser上运行没问题，手机上直接不支持，而且没有warning信息…
  • 官方code demo更新滞后，这个大概是和它版本发布太快有一定关系
    • https://github.com/alibaba/weex/issues/1570，这是关于navigator的issue
    • 官方文档上对于navigator的描述不清就算了，其官方提供的demo examples\component\navigator-demo.we运行竟然也有问题
    • 而且已经滞后3个月没有update，网上找不到有用资料，问群友也没有回复
    • issue滞后6天回复：承认官网code demo中navigator的 push跳转的baseURL有误(现已在weex的官网上update，不过这样的情况进度根本无法保证！)

评估总结

RN比Weex难上手，学习成本高一些，不过用惯了也就这样了；

Weex场景太受限，而且坑太多，资料太少，目前的应用发布除了手淘外好像没有什么，而且功能很受限，学习下可以，真正的应用开发发布根本控制不住进度，搞不好遇到一个坑要等新版发布才能fix。

Weex比RN效率高一些，但是高的有限，比起源生的低，不过这个都可以通过未来硬件条件的提升来平滑用户感受。据说weex注重优化效率，而rn则是更注重丰富其应用场景。

两者都可期待其未来，目前的话RN勉强可以用来开发APs，Weex则还暂时不合适，但是想要通过它们来完全的摆脱native的code限制目前还做不到，只能再某些应用场景中做到，具体要看AP的功能目标。

以上内容摘抄自Ashen的分享~