React Native与Weex开发对比及概述

本文对比了ReactNative与Weex两种跨平台开发框架,详细分析了它们在编写方式、JS引擎、框架特性、异步处理、扩展性、组件丰富度、性能、社区支持和上手难度等方面的异同。并探讨了ReactNative与原生开发的优缺点。

React Native与Weex开发对比及概述

 

React Native--概述及与Weex和Native开发的对比(一)

https://www.jianshu.com/p/613c1e8611e9

 青苹果园 关注

2018.05.23 12:19* 字数 967 阅读 8156评论 4喜欢 11

React Native

一. 什么是React Native?React是什么,Native又是什么?

React

  • React是由Facebook推出的一个JavaScript框架,主要用于前段开发;
  • React 采用组件化方式简化Web开发:
    • DOM:每个HTML界面可以看做一个DOM;
    • 原生的web开发方式,HTML一个文件,javaScript一个文件,文件分开,就会导致修改起来比较麻烦;
    • 可以把一组相关的HTML标签和JavaScript单独封装到一个组件类中,便于复用,方便开发。
  • React 可以高效的绘制界面
    • 原生的Web,刷新界面(DOM),需要把整个界面刷新.
    • React只会刷新部分界面,不会整个界面刷新。
    • 因为React独创了Virtual DOM机制。Virtual DOM是一个存在于内存中的JavaScript对象,它与DOM是一一对应的关系,当界面发送变化时,React会利用DOM Diff算法,把有变化的DOM进行刷新.
  • React是采用JSX语法,一种JS语法糖,方便快速开发。

Native

  • 指使用原生API开发App,比如iOS用Object-C或Swift语言开发。

所以React Native可以总结为:由Facebook推出,基于JavaScript框架和React库来提高多平台开发效率的一门语言。其核心思想是:Learn once, write anywhere.

二. React Native和Weex的对比?

Weex的概念:

  • Weex是2016年6月由阿里巴巴推出的一个动态化的高扩展跨平台解决方案,支持iOS、安卓、YunOS及Web等多端开发部署。
  • 思想:Write once, run anywhere.

相同点:

  • 都可以实现hot reload,边更新代码边查看效果
  • 布局都是基于flexbox
  • 都采用Web的开发模式,使用JS开发
  • 都是支持iOS和Android
  • 渲染机制都是Virtual DOM

不同点:

维度React NativeWeex
支持FacebookAlibaba
思想Learn once, write anywhereWrite once, run anywhere
编写方式需针对iOS、Android编写2份代码只需要编写一份代码,即可运行在Web、iOS、Android上
JS引擎JSCoreV8
框架React.js组件化,数据绑定 Virtual DOM JSX模板学习使用有一定的成本Vue.JS 组件化,数据绑定 Virtual DOM 模板就是普通的html,数据绑定使用mustache风格,样式直接使用css
异步提供了Promise的支持只支持callback
扩展不同平台可自由扩展为了保证各平台的一致性,一次扩展得在各个平台都实现
组件除了自带的,还有js.coach上社区贡献的,比较丰富基本靠平台提供
性能更优秀
社区非常成熟和活跃开源较晚,社区处于成长期
上手难度困难容易

总结:

  • Weex 和React Native最主要的区别可以总结为:Write once, run anywhere和 Learn once, write anywhere思想层次,以及Vue.js和React.js两大基础框架上的区别。
  • Weex相对来说学习门槛较低,易用性和性能等方面有优势;而React Native则在社区成熟性、组件和文档丰富上更有优势。

三. React Native开发与Native开发的对比

Native App

  • 优点:性能高;用户体验好;稳定性强。
  • 缺点:开发维护成本高,版本更新时间长。

React Native

  • 优点:
    • 跨平台开发
    • 跳过App Store审核,远程更新代码,提高迭代频率和效率,既有Native的体验,又保留React的开发效率。
  • 缺点:
    • 对于不熟悉前端开发的人员上手比较慢;
    • 不能真正意义上做到跨平台;
    • app包体积增大明显。

四.团队开发模式的选择

根据公司的具体情况选择开发模式:

  • 如果用户要求产品的体验度高、稳定性好并且不需要很频繁的更新,则选择Native App开发模式最好;
  • 如果核心业务要求用户体验度和稳定性好,部分业务需要频繁更新,则选择Hybrid App(Native + H5)混合开发模式最优,现在市场上大部分都是这个模式。
  • 如果是创业型公司或小团队开发,局限于人力和资源,非常推荐使用React Native或Weex开发,基本一个人就可搞定多端开发任务(估计会很累^ v ^)。

当然这也不是绝对的,就像我们公司(搞金融的)的产品,原来是使用Hybrid App开发模式,现在准备部分业务接入RN。

### VueReact Native特点对比 #### 特点概述 Vue React Native 是两种不同的框架,分别用于构建跨平台应用。React Native 主要专注于通过 JavaScript React 构建原生移动应用程序[^1];而 Vue 则是一个渐进式的JavaScript框架,主要用于开发Web界面,其扩展到移动端主要依赖于Weex或其他工具链[^3]。 #### 优点分析 ##### React Native 的优势 - **成熟度高**:作为一个被广泛采用的技术栈,React Native 提供了一个成熟的生态系统支持社区,拥有丰富的库插件资源。 - **性能表现良好**:尽管导航体验可能存在不足之处,但在大多数情况下仍能提供接近本地应用级别的用户体验。 - **一次编写多端运行**:允许开发者使用同一套代码基础来创建iOSAndroid版本的应用程序,从而提高效率并降低成本。 ##### Vue 的优势 - **轻量级核心**:相比其他大型前端框架而言更为精简,在某些场景下可以带来更快的速度以及更少的学习曲线。 - **灵活性强**:易于其他技术集成,并且可以根据项目需求逐步引入新功能而不必完全重写现有代码。 - **良好的文档支持**:官方提供了详尽的指南帮助初学者快速上手,同时也促进了最佳实践模式在整个社区内的传播。 #### 缺点探讨 ##### React Native 的局限性 - **布局复杂度增加**:由于不同操作系统上的组件设计差异较大,这给实现一致性的UI带来了挑战[^4]。 - **调试难度较高**:相较于纯原生开发方式来说,可能会遇到更多难以定位的问题,尤其是在处理特定设备特性时。 ##### Vue 面临的问题 - **生态相对较小**:虽然近年来发展迅速,但是相比于React及其周边环境仍然显得不够完善,特别是在移动端的支持方面存在差距。 - **市场接受度较低**:对于企业级客户而言,可能因为缺乏足够的成功案例而在选择技术方案时有所顾虑。 ```javascript // 示例展示如何在React Native中定义一个简单的视图组件 import React from 'react'; import { View } from 'react-native'; const MyComponent = () => ( <View style={{ flex: 1 }}> {/* 组件内容 */} </View> ); export default MyComponent; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值