Weex&ReactNative对比

weex开源有一段时间了,其实去年刚听说weex这个项目的时候,我就对它很敢兴趣,很大程度上是因为我自己对vue的喜爱。我从13年左右开始接触vue,14年开始熟悉这个轻量的框架,并慢慢的推荐给了身边的朋友,当我得知手淘的weex是基于vue的时候,就有了想了解一下的冲动。在weex开源之前,我刚好有几个月的时间一直在致力于ReactNative的优化改造,加上自己之前使用ReactJS的一些经验,对于ReactNative项目也算有了一些自己的见解。趁着weex开源了,赶在前几天,我花了两三天的时间把weex android的源码完整的看了一遍,前端js代码也粗略看了一下,结合自己对ReactNative源码的一些了解,正好在这里对两者做一个尽量中立的比对。

首先,我们要承认,weex的确是站在ReactNative的肩膀上的,核心思想上两者并没有大的区别,直观的看上去,我认为有三个主要的区别:

JS引擎:

weex使用V8, ReactNative使用JSCore

JS开发框架:

weex基于vue.js(2W+ star)。小巧轻量的前端开发框架,组件化,数据绑定,2.0引入virtual dom。

ReactNative使用React(4W+ star)。革命性的前端开发框架,组件化,数据绑定,virtual dom。

Android版本要求:

ReactNative使用了Choreographer,因此必须在API16以上才可以使用。

weex使用handler来代替Choreographer,可以在API14以上使用。

weex出来的初衷也是为了解决ReactNative使用过程中遇到的一些问题,当然具体决定使用那个框架,我觉得需要从一下几个方面来做对比:

学习成本

  1. 环境配置:

    ReactNative需要按照文档安装配置很多依赖的工具,相对比较麻烦。
    weex安装cli之后就可以使用

  2. vue vs react

    react模板JSX学习使用有一定的成本
    vue更接近常用的web开发方式,模板就是普通的html,数据绑定使用mustache风格,样式直接使用css

  3. 布局

    两者实现了flexbox的相同子集(都使用了FaceBook的代码解析),基本没有区别

易用性

  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官方只能将ReactNative基础js库和业务js一起打成一个js bundle,没有提供分包的功能,需要制作分包打包工具

    weex默认打的js bundle只包含业务js代码,体积小很多,基础js库包含在weex sdk中

  6. 部署

    斑马目前同时支持weex和ReactNative页面,但是中心已经转向weex

    另外斑马提供了可以拖拽搭建weex活动页面的功能

  7. 扩展性

    组件的扩展上,weex和ReactNative具有一样的能力

    三方库的接入上,weex对网络,图片,统计等常见的用户可能想自己定制的功能,提供了相应的适配接口,可以由用户方便的定制,ReactNative需要自己修改源码

  8. 集团库接入

    weex有默认的mtop接入实现,UT接入实现

    windvane也提供了对weex页面的支持,可以复用app中的web容器

  9. 跨平台

    ReactNative支持Android iOS两个平台,需要自己扩展去支持web,windows和node-webkit的支持正在开发中

    weex可以支持Android iOS web三个平台

  10. Moudle方法调用线程

    weex 可以通过注解标注是否在UI线程执行

    ReactNative在native_modules线程执行

  11. 异步

    weex只支持callback

    ReactNative提供了Promise的支持

性能

  1. 分包加载

    ReactNative需要自己实现,从而优化JS加载执行时间

    weex默认提供分包实现

  2. 官方支持

    ReactNative官方关注的重心目前并不在性能上

    weex持续关注性能优化

  3. 大块view渲染

    ReactNative默认没有优化机制,长view渲染性能会比较差

    weex提供了node和tree两种渲染模式,优化长view的渲染

  4. ListView Android

    ReactNative目前采用scrollView使用,有一些性能问题

    weex使用recyclerview实现,性能稍好

社区

ReactNative 3w+ star,issue,pull request, contributor多,社区活跃,围绕react产生了许多开发框架

weex开源较晚,目前只有4k+ start,contributor以阿里人为主,较少,issue和pull request也比较少,社区目前规模比较小

工具链

  1. debug tool

    都有提供在chrome中调试的支持

  2. 打包工具

    ReactNative需要自己改造

    weex默认提供的足够满足使用需求

  3. webpack,gulp,脚手架工程

    weex有相应的插件,方便开发,部署使用

    ReactNative有,但是很久未更新,需要自己维护

通过上面的一些对比,就我个人来说,我还是比较倾向于使用weex,我比较熟悉vue是一方面,另外性能和发布这一块也是我比较关注的点。使用ReactNative确实也可以做到不错,但是最终我发现,自己其实是在做weex团队已经做的事情。与其这样,为什么我不选择weex,去帮助weex解决一些其他问题,给自己留更多时间去做业务开发呢?另外从业务开发的角度,我也觉得weex的门槛相对比较低,更适合业务开发同学上手,简单就是不简单。

欢迎大家和我讨论

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom