写在前面
- 目前主流的应用大体分成三类：Native App, Web App, Hybrid App.
- Native App 特点:
- 性能好
- 完美的用户体验
- 开发成本高，无法跨平台
- 升级困难 (审核), 维护成本高
-
Web App 特点:
- 开发成本低, 更新快, 版本升级容易, 自动升级
- 跨平台，Write Once , Run Anywhere
- 无法调用系统级的 API
- 临时入口，用户留存度低
- 性能差, 体验差, 设计受限制
- 相比 Native App，Web App 体验中受限于以上 5 个因素：网络环境，渲染性能，平台特性，受限于浏览器，系统限制。
-
Hybrid App 特点:
- Native App 和 Web App 折中的方案，保留了 Native App 和 Web App 的优点。
- 但是还是性能差。页面渲染效率低，在 Webview 中绘制界面，实现动画，资源消耗都比较大, 受限于技术, 网速等因素
- 为了解决上述问题, 一套高效率, 高性能的跨平台方案成为了大家热衷的话题, 也就有了下面要比较的 weex 和 react native.
基本概念
weex
- 简介:
weex 是阿里巴巴公司与 2016 年 6 月开源的一种用于构建移动跨平台的 UI 框架 - 特点:
- 1.Lightweight: 轻量级, 语法简单, 易于使用
- 2.Extendable: 可扩展, 丰富内置组件, 可扩展的 API,
- 3.High Performance: 高性能
- 核心理念:
- Write Once Run Everywhere
- 基于 JS 开发框架:
- weex 基于 vue.js
React Native
- 简介:
- Facebook 在 2015 年 3 月在 F8 开发者大会上开源的跨平台 UI 框架
- 核心理念:LEARN ONCE, WRITE ANYWHERE
- 基于 JS 开发框架:
- React Native 基于 React
知识拓展:vue.js 和 React
Vue:
- 是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.
React:
- 基于 HTML 的前端界面开发正变得越来越复杂，其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自 Facebook 的 React 框架正是完全面向此问题的一个解决方案，按官网描述，其出发点为：用于开发数据不断变化的大型应用程序。相比传统型的前端开发，React 开辟了一个相当另类的途径，实现了前端界面的高效率高性能开发。
Vue.js 和 React 的异同:
- 相同点:
- React.js 和 Vue.js 它们都提供数据驱动、可组合搭建的视图组件。
- 不同点:
- 1. 内部实现本质上不同:
- React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。
- Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板，数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。但是，相对于常见的误解——Virtual DOM 让 React 比其它的都快， Vue.js 实际上性能比 React 好，而且几乎不用手工优化.
- 2. 在 API 方面:
- React（或 JSX）的一个问题是，渲染函数常常包含大量的逻辑，最终看着更像是程序片断（实际上就是）而不是界面的视觉呈现。
- Vue.js 通过在模板中加入一个轻量级的 DSL (指令系统)，换来一个依旧直观的模板，且能将逻辑封装进指令和过滤器中。
- 1. 内部实现本质上不同:
Weex 和 React Native 的异同
相同点:
- 都采用 Web 的开发模式，使用 JS 开发；
- 都可以直接在 Chrome 中调试 JS 代码；
- 都支持跨平台的开发；
- 都可以实现 hot reload，边更新代码边查看效果；
不同点:
JS 引擎
- weex 在 iOS 上使用 JSCore 而在安卓上使用了 V8
- ReactNative 使用 JSCore
学习成本
- 1. 环境配置：
- ReactNative 需要按照文档安装配置很多依赖的工具，相对比较麻烦。 weex 安装 cli 之后就可以使用
- 2.vue vs react: 上面已经做过对比
- react 模板 JSX 学习使用有一定的成本 vue 更接近常用的 web 开发方式，模板就是普通的 html，数据绑定使用 mustache 风格，样式直接使用 css
易用性
- 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 支持 Android iOS 两个平台，需要自己扩展去支持 web，windows 和 node-webkit 的支持正在开发中
- weex 可以支持 Android iOS web 三个平台
性能
- 1. 分包加载
- ReactNative 需要自己实现，从而优化 JS 加载执行时间
- weex 默认提供分包实现
- 2. 官方支持
- ReactNative 官方关注的重心目前并不在性能上
- weex 持续关注性能优化
- 3. 大块 view 渲染
- ReactNative 默认没有优化机制，长 view 渲染性能会比较差
- weex 提供了 node 和 tree 两种渲染模式，优化长 view 的渲染
扩展性
- ReactNative: 所有 RN 的 native 底层，都是一个个的模块 Module，完全解耦，随意灵活扩展插拔移除，而且支持开发者自行构建完全自己的 Module，无论是界面还是数据网络接口。
- 三方库的接入上，weex 对网络，图片，统计等常见的用户可能想自己定制的功能，提供了相应的适配接口，可以由用户方便的定制，ReactNative 需要自己修改源码
社区支持
- Weex 开源较晚，互联网上相关资料还比较少，社区规模较小；
- React Native 社区则比较活跃，可以参考的项目和资料也比较丰富
一张图: 从渲染时间, 内存使用,CPU 占用, 帧率 (图形处理器每秒钟能够刷新几次, 高的帧率可以得到更流畅、更逼真的动画。每秒钟帧数 （fps） 愈多，所显示的动作就会愈流畅。)
文章推荐
weex vs react-native
Weex & ReactNative & JSPatch
Weex 和 react native 对比
对无线电商动态化方案的思考（一）系列文章
结语:
- 由于公司要做跨平台开发, 将学习对比这个任务交给了我, 因此上网查了很多文章, 虽然从网上看了很多对比, 有人说 weex 比 react native 更加容易上手, 但我感觉对于一个初学者 (本人 ios 开发) 的我参考项目和资料是相当重要的,weex 相对下网上学习资料比较少, 社区规模也比较小, 如果遇见问题怎么办, 所以个人比较倾向于 React Native, 但是各有千秋, 大家也会有自己的看法.
作者：wyw89500
链接：https://hacpai.com/article/1483079384055
来源：黑客派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。