Weex和React Native的异同

JS引擎：

• weex使用安卓V8，iOS使用JSCore， React Native使用JSCore

JS开发框架：

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

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

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

学习成本

• 环境配置：

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

• vue vs react

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

• 布局

• 两者实现了flexbox的相同子集（都使用了FaceBook的代码解析），基本没有区别

易用性

• sdk使用

  • ReactNative需要解决mvn依赖的问题，因此必须自己修改源码，打包发布

  • weex可以直接在mvn项目中使用

• 调试

  • 都可以在chrome中调试JS代码

  • weex支持在chrome中预览页面dom节点，ReactNative不支持

• 页面开发

  • weex提供了一个playground，可以方便的预览正在开发的页面

  • ReactNative开发一个页面，需要建立一个native工程，然后编译运行

• 即时预览

  • weex和ReactNative都有提供hot reload功能，可以边更改代码，边在手机上看到效果

• 打包

  • ReactNative官方只能将ReactNative基础js库和业务js一起打成一个js bundle，没有提供分包的功能，需要制作分包打包工具

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

• 跨平台

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

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

性能

• 分包加载

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

  • weex默认提供分包实现

• 大块view渲染

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

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

社区

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

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