开发跨平台 App 推荐 React Native 还是 Flutter？

| 2022-11-9 13:59 阅读 97324 评论 5

开辟跨平台 App 保举 React Native 还是 Flutter？

Anthony0814 2022-11-9 14:03

不论是 React Native 还是 Flutter 都可以用于开发跨平台应用，选哪个看你自身需求，但首先得了解清楚两者都是什么。React Native 能够跨平台是因为它允许你使用 React/JavaScript/JSX 的写法写原生应用，而在底层他会替你调用相应的 iOS 原生组件或者 Android 原生组件，又或者直接生成适用于 Web 的 DOM 树。所以他做的事情是，用 JavaScript 调用对应系统渲染器进行渲染展示。那么，Flutter 又是怎么跨平台的呢——Skia。当你使用 Flutter 框架（Dart）开发应用时，其底层渲染由 Skia 接管，没有什么 Android runtime、Chromium 或者其他中间层了，是的，Skia 的下层便是 CPU/GPU 了，一个受控的画布，基本上意味着你想画什么就画什么了，不再需要调用原生 Widgets，而这便是 Flutter 能够跨平台的原因。除此外，还可以提供一些有用信息供你参考。谁更快：React Native 这种从使用 JavaScript 到解析调用 Native 的过程中间显然要经过多个环节，而 Flutter 里将 Dart 代码 AOT 编译为本地代码，所以 Flutter 应用是直接使用本机指令集运行，这就不涉及解释器这一层。关于 Flutter 为什么这么快 Google 的工程师在 Google I/O、GDD 以及刚结束的 D2 上都有介绍，这里贴一张图可以简要说明「Flutter 相比 Android 与其他跨平台框架相比为何那么快」的原因，见[注1]。支持平台：React Native 支持 iOS/Android/Web 是毋庸置疑的，但 Flutter 现在还只能「成熟」的支撑 iOS/Android，即便上个月 Flutter Live 1.0 说到 Flutter for Desktop 以及 HummingBird，但这些都还处于初期，至少在明年 Google I/O 前还不能报有希望。渲染控制：React Native 做的时候是利用 JavaScript「调用」原生 Widgets，那么不同平台 Widgets 的差异势必使得 React Native 只能取两者的公共子集，「Write once, run everywhere」不假，但「Control every pixel on the screen」是做不到的；Flutter 不调用原生组件，相反，有一组自己的Widgets，而他们都由 Flutter 的 Framework 和 Engine 管理和渲染，按 Google 的话来说就是Control every pixel on the screen」，你不再需要因为不同端的差异而在实现上进行妥协[注2]。成熟/生态：Dart 生态相比移动端/前端生态远小的多，看看 Flutter Live 上那些截图就知道 Flutter (+Dart) 的开发人员也远不及 Android / iOS / Chromium 等平台的开发人员，是的，是远远不及，即便加上 Dart 相关开发人员。往外扩再想想社区，React Native 经过多年发展，其现在的社区规模或者是生态完善性都是 Flutter 近期根本无法追赶上的，虽然 React Native 依旧有不少「坑」。开发上手：是个前端开发就一定知道 HTML / CSS / JavaScript，但是用 Flutter 你需要学习一门新语言 Dart，而如果你的编程习惯不好或者不善于抽象，你的 Flutter 代码很容易一层套一层，like callback hell，所以你说哪个更容易上手呢？
Flutter 风光很足，且官方回应非常迅速（GitHub Issues），但生态远远没到成熟的地步，这对于资源有限的应用开发团队来说是很致命的，且现在在开发调试上还是有些痛苦的，比如无法准确定位错误堆栈等；但 React Native 为了达到跨平台而对 UI 上的一妥协与牺牲也是被人们所熟知的。但如果说两边现在最让人期待的事情，Flutter 无疑是 Flutter for desktop 与 HummingBird，而 React Native 则无疑是 Facebook 正在进行的重构工作。现在说谁将最终获胜还为时尚早。
React Native 大家熟悉多一些，所以最后多安利一下 Flutter。Flutter 整体架构主要分三层[注3]：Framework，Engine 与 Embedder，前两层结构见下图。

Framework 是框架使用者需要直接面对的，包含文本/图片/按钮等基础 Widgets、渲染、动画、手势等。如果你写 Flutter 应用，那么大致可以理解为调用这些 package 然后再用 Dart 「拼装」些自己的代码。Engine 使用 C++ 实现，这一层包含 Skia，Dart 和 Text。后两个不太熟，说说 Skia。这是一个二维图形库，提供了适用于多种软/硬件平台的通用 API，既是 Chrome，Chrome OS，Android，Firefox，Firefox OS 等产品的图形引擎，也支持 Windows 7+，macOS 10.10.5+，iOS8+，Android4.1+，Ubuntu14.04+ 等平台；Dart 包含 Dart Runtime 等（JIT/AOT），Text 则负责文字渲染部分。Embedder 是一个嵌入层，做的事情是 Flutter to Platforms。比如渲染 Surface，线程设置，插件等。Flutter 的平台层很低，比如 iOS 只是提供一个画布，剩余的所有渲染相关的逻辑都在 Flutter 内部，而这就是 Flutter 所宣传的可以精准控制每一个像素的原因；但不可否认，对于插件部分，还是需要特定操作系统底层的建设（比如支付、地图等），而在 React Native 上（开发应用）则不需要相关背景。关于 Flutter 更加详尽的介绍可见分享让我们在2019年重新认识 Flutter

以上，供参考。
注1 (from What makes Flutter fast, Yuqian Li on D2)

注2：Google 的原话是「Flutter lets you control every pixel on the screen, and its powerful compositing capabilities let you overlay and animate graphics, video, text and controls without limitation.」注3：Flutter 系统架构详情可见 https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.gbb3c3233b_0_162

回复
双眼皮@蚊子 2022-11-9 14:02

看历史知未来——GTK+，wxWidget，Qt，这三那个最酷炫，哪个最好用，哪个生命力最强？显然是完全direct ui + 魔改C++的Qt。flutter就是移动端的Qt（skia渲染 + Dart），RN和weex大约就是移动端的wxWidget（原生组件 + js）。所以长远看，我选flutter。
ps：比较一下Qt移动端和桌面端的表现，移动版Qt quick是不配称作“移动端Qt”的，这个称号还是让flutter来继承吧。

回复
coosir 2022-11-9 14:01

嗯。。。这个问题十分不好回答啊(捋下鱼须)。闲鱼作为flutter领域的先驱者，以及fish_redux、flutter_boost等当红flutter库的作者，当然是欢迎广大的开发者多多使用flutter相关技术栈逃~:)。咳咳，不过呢，我们还是正经得聊一下React Native(下面简称RN)和flutter之前的异同：0x00 简单介绍一下React NativeReact Native是Facebook开源的一款基于react思想、使用JS、能够给移动平台带来native般体验的框架，官网最新的版本是0.5.9。flutterflutter来自Google，上层使用dart语言构建跨平台应用，通过平台相关的embedded层接入到使用c++编写的engine层，再通过skia库直接与GPU进行交互。通过对dart代码的AOT编译，拥有优异的计算(CPU)、渲染(GPU)性能。官网最新的版本为1.2。0x01 跨平台性开发者们使用跨平台技术栈，首要的目的是为了能够省事儿，所以跨平台能力是首先要被衡量的指标。Build native mobile apps using JavaScript and React这意味着开发者可以复用庞大的JavaScript生态和优雅的react思想来书写RN的代码，给开发提供很多的便利性。从实现原理上来说，RN进行完排版之后会把最终的渲染交给native view，这种方式带来的是如native般的UI性能，但同时也给给平台一致性带来了一些问题。除开渲染层的不一致，在iOS和Android没有使用同一个JavaScript虚拟机也会带来一些暗坑。手势的处理上两个平台不好统一，RN官方也没有提供一个抹平差异的库，虽然开源社区有react-native-gesture-handler。Beautiful native apps in record timeflutter官方的口气很大，说自己是”空前“的。是不是”空前“，我们得来评估一下。编程语言层面，flutter使用dart语言构建应用，这门语言对大多数人来说应该是比较陌生，好在dart的语法并不复杂，与Java等强类型oop语言非常相似，还加入了函数式的特性，使用起来还是挺方便的。flutter提供类似React思想的响应性UI编程模型，让UI开发变得更加fancy。原理上来说，flutter在各个平台上使用统一的vm(dart vm)，自带GDI(skia)。skia是一个已经发展多年成熟度相当高的2D图形库，也是Android系统和Chrome一直在使用的图形库。flutter从逻辑计算到渲染绘图，都是自己的，使得它在跨平台一致性上有良好的表现。dart提供的AOT特性也可以保证应用在线上有一个好的性能表现。多平台支持RN目前支持iOS和Android两个平台，另外有个非官方的ReactNativeX的项目旨在让RN运行到其他平台。flutter早期支持iOS和Android，desktop的支持目前尚不完善。近期flutter团队发布了Hummingbird，旨在让flutter编写的应用可以运行在浏览器端。从多平台支持的角度看，两边差距不大。相比RN，flutter在desktop的支持上有些优势，但目前都是不怎么可用状态。0x02 开发便利性工具链RN在打包发布方面有被前端广泛使用的webpack支持，官方自己提供了基于浏览器的debug工具，与前端同学管用的调试方式并无二致。flutter基于iOS和Android已有的打包工具添加了flutter产物打包功能，同样debug工具也由官方自己提供，除了刚发布的基于浏览器的调试工具外，flutter团队提供的调试工具可以直接在Android Studio或者VScode这类IDE上直接使用。调试便利性JS的调试方式已经很成熟了，这里不多做展开。 flutter在debug阶段可以使用集成于IDE插件中的hot reload功能做到亚秒级的新代码加载速度，十分适合与设计师坐在一起结(ya)对(li)编(tiao)程(shi) ：）。第三方库在RN上你可以使用JS的大部分库，平台相关的plugin也相对丰富。flutter在这方面稍显欠缺，库的数量上无法与JS生态相比较。flutter/plugins项目提供了大量的平台相关插件供开发者使用，倒也是满足了日常开发的需求，另外dart pubs上的公开库数量也日趋上升。在混合开发和大型app业务框架上，闲鱼技术开源的flutter_boost提供了与native混合开发的可能，而fish_redux使得大型app中的复杂页面的开发在flutter中变得更加容易。0x03 未来的发展开发者选择一个技术，都是压了”身家性命“在上面，谁也不想刚入门就发现这门技术即将被淘汰。RN是个很好的项目，在发布之初给移动开发带来了一阵旋风。但不得不说，Airbnb宣布放弃使用RN技术栈对于整个社区有不小的打击，而文章中对原因的阐述也相当有说服力。flutter在1.0发布之后趋于成熟，被钦定为Google Fuchsia系统的应用层框架。从团队2019 roadmap中可以看到，flutter当前重点在于完善一些现有功能上的细节与bugfix，另外对于广受期待的动态化特性，flutter团队也在开发code push功能。从flutter团队目前的方向和笔者在闲鱼开发中实际使用的flutter的感受来看，整体上flutter在框架层面目前已经基本上稳定。从桌面端跨平台框架发展的历程来看，Java GUI从最初使用peer(对等设计模式)的AWT，到基于Java图形绘制接口性能巨慢无比的Swing，再到公认性能最好目前应用最广泛的基于目标平台绘制接口的SWT，我们可以从中窥见一些历史规律。peer(对等设计模式)，即AWT中的一个控件，对应目标平台(如Windows)上的一个控件(是不是看起来跟RN有一些相似)，最终AWT被放弃是因为peer模式传输层级过多造成效率低下，GUI部分为了保证可移植性只能保留各个平台公共的接口。SWT与QT(另一个被广泛使用的桌面端跨平台GUI框架)，牺牲了一部分可移植性(主要是因为直接调用了目标平台的图形绘制接口)，带来了GUI的高性能。flutter也采用了类似技术栈，skia来抹平各个平台的绘制接口差异，并向上提供统一的图形接口。从这个角度来说，无疑flutter可能会是一个更有未来的跨平台框架。0x04 写在最后当然Facebook官方对于RN正在进行重构，包括把大部分逻辑移动到c++层来减少线程切换的开销提升性能等。选择一个框架需要考虑的实际情况比框架的优劣比较更加重要，比如你的项目大小、开发人员构成等， RN和flutter作为目前移动平台上炙手可热的框架，两者并不是孰优孰劣的对立关系。纸上得来终觉浅，如果你是个对新技术感兴趣，抑或是希望在移动平台上有所突破的开发者，何不尝试一下Google最新的成果咧？*对flutter内容感兴趣，欢迎关注“闲鱼技术”微信公众号，数十篇精品文章等着你哦～

回复
slf2wr 2022-11-9 14:01

其实看个人开发习惯，如果你是前端的话，React Native 对你可能更友好一些。如果你是 App 端开发，Flutter 可以更舒服一些。当然都作为响应式开发，无论 React Native 还是 Flutter 都是存在一定相似之处的，坑的话也都多多少少会有，但是性能上而已 Flutter 无可质疑会更好。更多可以查看我写过的一些文章：移动端跨平台开发的深度解析 - 掘金
React Native 的未来与React Hooks
或者通过我github项目体验一下，目前均有apk提供下载测试。https://github.com/Carguo

回复
178hz 2022-11-9 14:00

最近因为有个人开发 APP 的需求，需要调研一下市面上主流的跨平台开发框架的整体情况，好选择一个适合自己的框架，所以特地总结对比了一下。（本文较长，阅读大概需要10分钟左右）国内外我选择了一共5个主流的测评对象，分别是RN，Flutter，Ionic，NativeScript，以及用友APICloud团队开发的AVM。目前来看比较火的应该是 Flutter，次之 RN，具体还要看企业的应用场景和领域，AVM，Ionic，NativeScript 在不少企业和个人开发者中也使用率较高。一，安装环境，开发工具对比。任何框架的安装环境都代表了这个框架对新手是否友好。所以我特别从安装环境，开发工具上介绍各个不同框架的情况，来比较一下，新人上手的成本和门槛，笔者是 MacOS 用户，以下全文介绍的都是在 Mac 下的开发环境和开发工具。1.1 React NativeRN 是Facebook于2015年4月开源的跨平台移动应用开发框架，到现在已经发展了6年多了，目前最新版本是0.66，本周（2021-12-10）还有更新发布小版本，整体来看框架还是非常有生命力的。官网：https://reactnative.dev/我们来看安装环境和开发工具，从最新的官网可以看到，如果只是上手的话还是比较方便的，只需要本地安装 Nodejs 12版本以上就可以了。然后借助官网推荐的 Expo 工具可以快速搭建起来本地的一个开发环境。因为我是 MacOS 用户，之前安装过 Xcode 所以整体安装起来还算是流畅。首先是 Nodejs 的命令行工具安装：yarn global add expo-cli这里不说配置源什么的了，如果慢的话，可以切换国内 yarn 源，安装完毕后，直接使用expo init AwesomeProject安装项目，项目安装完毕后进入项目执行yarn start会重新安装一次 expo-cli，之后本地启动项目，打开 dev 的浏览器界面如下，最左边可以看到打开的是本地的 expo 得调试台，选择本地 LAN 网络，然后点击 Run on iOS simulator，启动了我本地的一个 iPhone 8的设备，然后看到了我们的界面，最右边是本地生成的模板代码。

编辑工具我用的 vscode，官方也是推荐 vscode。使用脚手架的生成的目录和正常的 React 项目差不多，入口在 App.tsx 文件，支持修改后的 hotRload，整个流程走下来对前端开发来说门槛不高，至少到调试开发阶段，如果只单纯涉及到 UI 编写，配置完直接就可以开始干活了。1.2 FlutterFlutter 从出生（2018年发布v1.0）到现在也3年多了，是 Google 力推的跨端开发框架，和 RN 不同的是开发语言用的 Dart 而不是 JavaScript，官网在这里：https://flutter.dev/ 最近几年发展的比较猛，各大公司都在主端业务引入，包括我所在的公司也有很多业务使用 Flutter 进行了 UI 部分的开发，下边我就简单介绍一下 Flutter 的开发环境和工具。首先肯定是需要下载安装完整的 Xcode 和 Xcode developer tools开发工具，我们默认大家都装了，之后不在赘述。需要先下载 Flutter 的 SDK：https://docs.flutter.dev/development/tools/sdk/releases解压缩 SDK 后设置对应的 SDK 环境变量地址：cd ~/development

unzip ~/Downloads/flutter_macos_vX.X.X-stable.zip

export PATH="$PATH:`pwd`/flutter/bin"如果过程中遇到问题可以使用 flutter doctor 来查看问题进行修复，有报错或者缺失环境，会有提示你如何修改，比较方便。如果 flutter doctor 没有报错的话，那么flutter 命令行就安装完成了，我们来看一下开发体验。首先我自己都是用的 vscode 进行开发的，需要安装官方推荐的 vscode 插件，直接在插件市场搜索 Flutter 安装就可以了，之后就可以通过插件新建 Flutter 新项目了。本地配置好对应的 iOS 模拟器，在 vscode 左边点击调试按钮选择对应的模拟器，就可以直接进行开发调试了。

截图是我自己做的一个小应用项目，目录结构也比较简单，在 lib 目录下的 main.dart 就是入口文件，唯一缺憾的就是 Flutter 对前端开发的语法不友好，Dart 虽然也不复杂，但是和 JavaScript 还是有比较多的出入的，需要一定时间的掌握和学习，而且对应的不少系统类库用法也不太一样。整体来说比 RN 要配置的复杂一些，对前端开发来说，Dart 语法是一个挑战，编写应用除了 Dart 之外还需要理解 Flutter 自己的状态管理机制，widget 概念以及对应的 material 相关库的功能才能上手，对新人门槛还是比较高的。1.3 IonicDrifty Co.在2013年推出了Ionic，可以说是混合式开发（hybrid）的鼻祖了，他推出之前大家一般都是在 PhoneGap 下开发混合式开发应用，Ionic 一开始是和 Angular 高度集成的，现在已经支持了 React 和 Vue 集成，以及可以使用 Cordova 的库，生态整体来说还是不错的，优点是 Web 技术为主，缺点也很明显，Webview 的表现和性能与 RN，Flutter 那种编译后转 Native Code 的性能对比肯定要差一些，一些 Web不支持的特性需要编写大量的原生插件来支持。下边来看一下他的安装环境和开发工具部分体验，首先安装全局的cli 命令行工具，Nodejs 版本12.14以上。npm install -g @ionic/cli

ionic start myIonicApp blank --type vue

ionic serve █看起来还是比较简单，但是需要安装的东西比较多，建议提前把 npm 设置成国内源，否则要等很久很久很久。使用 serve 之后，其实本地就是起了一个 webpack-dev-server

打开8100地址，其实就是一个正常的 web 项目，熟悉 vue 的同学一眼就能看出来了，IonicVue是作为 Vue 的一个插件存在的。

那么我看一下如何在模拟器上预览吧，首先需要安装下边两个工具，是前置依赖。npm install -g ios-sim

brew install ios-deploy然后在项目目录先 build 项目，然后我们直接使用 Ionic Cli：npm run build

ionic capacitor run ios -l --external选择一个本地的模拟器，之后就可以看到界面了，但是因为我本地的 Xcode 是11的老版本，会报编译错误，所以需要升级到最新的Xcode12以上版本，但是我的 Xcode 升不上去了，因为我的电脑系统不支持更高级别的 Xcode，所以后边我改成用 android 调试。我之前安装过 android studio，需要更新SDK 到最新，然后在 tools 里找到 AVD 面板，创建一个模拟器。

启动后需要 adb devices 检查一下，如果设备在线，再进行下一步：ionic capacitor add android

ionic capacitor run android这一步第一次非常非常慢，应该是和 ios 一样，需要编译成 apk 再同步到模拟器上。

最后的效果就是这样，我看到日志的最后几行就是 deploy 了一个debug 的 apk 到模拟器了。整体来说，Ionic 的安装步骤不算复杂，如果网络比较好，整个过程不到半小时，如果是最新版的 MacOS 系统，升级 Xcode 到最新版应该也比较流畅。看了一下官网，debug 方式就是利用 chrome 或者 safari 的网页调试工具调试，所以大家理解，这个Ionic 套壳了 webview，调试方法和 webview 调试方法是一致的。1.4 NativeScriptNativeScript是由Progress 公司开发的，已经专注于开发工具领域30多年的上市公司。整个 NativeScript 的能力和它的名字一样是专门为了 iOS 和 Android 而开发的，但是写法却是 JavaScript。和上面说的 Ionic 不一样是套壳 Webview，NativeScript 还是在 Js 和 Native 之间打通了一座桥梁，真正的使用 Native Code进行页面的渲染，这也使的它的表现能力比 Ionic 要强，从官网上看他也支持不同的 Web 框架写法，比如 Vue，React，包括 TS 支持，当然用原生 JS和 HTML也可以编写，官网：https://nativescript.org/。我们下边看一下他的安装环境和开发工具体验，我们依然是 MacOS 系统环境搭建。同样是需要先安装 NativeScript 的Cli 工具：npm install -g nativescript过程中会遇到从 codeload 下载依赖，可以设置代理或者修改 codeload 的 host 解决，我就遇到了，但这不是 nativescript 的问题：）。140.82.114.9 codeload.github.com使用 ns 命令创建 NativeScript 项目：ns create myNativescriptApp我选择创建一个 Vue 模板的空项目，命令行会交互式的引导你选择，用 Vscode 打开就可以编辑，目录结构和普通的 Vue 项目基本一样，入口在 app 目录下的 app.js，Vue 实例被 nativescript-vue 替代。

Run the project on multiple devices:

  $ ns run ios

  $ ns run android

Debug the project with Chrome DevTools:

  $ ns debug ios

  $ ns debug android

我们看一下在 android 下是什么样子的，iOS 也是因为我本地 Xcode 版本太老跑不起来，第一次编译时间都比较久，需要耐心等待。

运行起来后和 Ioinc 类似，也是有个 debug 的 apk 被装到模拟器里了，测试了一下本地修改前端代码，webpack 本地会进行 watch 和 sync 到模拟器，实现热更新，速度还可以，但是需要频繁的冷起app才生效。1.5 AVMAVM 是由 APICloud 研发的一套跨端的 JavaScript 框架，全称（APICloud-View-Model），写法类 Vue 也兼容 React JSX，有双向绑定，组件化和状态管理支持，并配套了系统级别的 API，支持云端编译和发布到不同的平台，官网是：https://www.apicloud.com/AVMframe，有自己的开发 IDE支持，我看今年12月份还有在更新SDK （2021-12-3），其中 JS Framework 部分是全部开源的，包括 JS 组件库。我们来看一下他的安装环境和开发工具，首先需要注册 APICloud 账号，因为他们继承了云端编译的功能，而且ide也是需要账号登陆同步代码。然后下载官网的APICloud Studio 3，如果是 Mac 系统一定要注意，不能直接在 download 目录打开，需要复制到应用程序文件夹内再用。下载后打开，熟悉 vscode 的同学应该能发现，这是一个基于 vscode 二次开发的 IDE。

入口文件是 pages 目录下的stml代码文件，在上面右键实时预览可以在右边直接看效果，需要注意的是，这里只能预览标准H5的组件及页面效果，不能预览原生API的功能，所以推荐要真实开发的话，需要使用真机安装AppLoader进行调试，类似RN的Expo。 AppLoader 的下载地址：https://docs.apicloud.com/Download/download#apploader装上之后保持Mac 和手机在同一网络下，用 AppLoader 扫描IDE 中的二维码就可以实时看到真机效果了。

在真机上像网络，wifi 这些系统级别 API 就可以正常使用和预览了，报错也会有提示，开发体验很像小程序。整体来说开发环境和开发工具是一体的，流程比较顺畅，全程也没有鼓捣任何命令行工具，但要根据官网文档的引导进行使用。1.6 总结经过对5个框架的初步讲解，大家可以看出来基本上大家的开发流程分成了两类，一类是直接把 debug 包装到手机上进行开发和调试，比如 Ioinc，NativeScript，还有 Flutter，另外一类则是需要通过一个额外的 AppLoader 进行辅助调试，比如 AVM，RN，当然后者也支持直接安装包到真机，但是 debug 的方式还是有所区别。在开发工具上，基本上大家都可以使用Vscode 进行开发，都支持 hotReload 功能，有些提供了自己的IDE，集成化程度比较高，比如 AVM。二，性能比较。下边我就从性能角度讲一下不同框架的对比情况，这个可能是大家最关注的了。我通过编写一个简单的超长的 viewlist 来进行横向比较，代码我放到这里了，https://github.com/xiaojue/ListViewDemo，后边大家可以去参考，实现一个1000行的图文列表，左图右文。RN 效果：

Flutter 效果：

Ionic 效果：

NativeScript 效果，这里NativeScript 开发体验最烂，后边会在 API 分析部分细说：

AVM 下的效果：

代码实现很简单，我也没有做特殊优化，没有滚动加载，没有交互事件，直接1000条数据搞满，使用的都是官方 list 组件。性能我们直接 adb shell 进入设备后，使用 top命令来观察 app 进程情况：

其中帧数我们用android的开发者功能，GPU截图来标识，编译速度直接用 time 命令统计, 均采用第一次debug启动耗时的时间。比如：time ns debug android框架内存CPU使用率debug编译速度RN（expo go）300M78%-116%0m32.229sFlutter190M37%-43%0m21.336sIonic138M49%-65%0m55.549sNativeScript147M19%~20%0m27.862sAVM122MB6%-10%0m0.094s检查 GPU 渲染速度和过度绘制  |  Android 开发者  |  Android Developers

RN

Flutter

Ionic

NativeScript

AVM

水平绿线表示 16 毫秒。要实现每秒 60 帧，代表每个帧的竖条需要保持在此线以下。当竖条超出此线时，可能会使动画出现暂停。我们简单分析一下，首先是内存占用，基本都是100MB 以上，RN 和 Flutter 最多，AVM最少。然后是 CPU 占比，我一直下拉 list，看 CPU占用率，其中RN 是最高的，但是它的 GPU绘制却很低，这说明 CPU 占用率越高说明计算越多，但是 GPU渲染速度  底说明没有卡顿，性能更好。比如我们看 Ionic 的 CPU 占用只有 RN 的一半，但是 GPU渲染速度却特别高，有很明显卡顿。所以我们可以说 RN 的性能比 webview 渲染的 Ionic 要好很多，包括 NativeScript 和 AVM 也是这个道理，CPU 占比越高，而 GPU渲染速度越底，那么性能就越好，可是CPU占用高也有个问题就是会比较费电… 最后我们再看编译时间，这关系到调试体验，这里面AVM 最快，基本是毫秒级同步到真机，其他基本都是秒级的，需要跑build。当然 Expo 和 AVM 都是有前置 Loader的，所以肯定比没有 loader 程序的快一些。AVM 我也不太清楚为什么这么快，这确实是让我很吃惊，但是有一点，AVM 在我的android模拟器上安装失败，所以我是用真机测评的，可能会有一些影响，真机的性能更高一些。三，是否支持多端编译（含小程序）。这里的多端不仅仅指android，ios，h5，更包含了是否支持国内的小程序编译。因为很多公司目前的业务场景都是需要在不同的APP里跑的，所以是否支持多端对我们国内用户来说很重要，我特意增加了这一对比项。另外目前 PC 端的编译各家也有支持，所以还另外增加了 windows，macOS 平台的对比。框架AndroidiOSH5小程序windows desktopmacOS
desktopReact Native√√√alita，remax，Taroreact-native-windowsreact-native-windowsFlutter√√√MPFlutter√√Ionic√√√X√√NativeScript√√XXXXAVM√√√√XX我调研的情况如上图，对勾的部分就是官网直接支持编译，叉号的意思就是官方不支持，也没有什么比较成熟的开源解决方案，而单独写了一些框架支持的比如 RN，Flutter 是有一些还算成熟的开源解决方案可以使用的。整体来看，如果只开发 Android 和 iOS 应用，这五个框架都没什么问题，如果要支持小程序和桌面软件则要考虑更多，目前来看 RN 和 Flutter 生态是最完整的，次之是 Ionic，当然如果您是以微信小程序为主的开发者并不考虑 desktop的情况下，那么 AVM 可能是更好的选择。四，生态情况。4.1 开源生态，流行度我们直接用 NPMCompare 来对比，因为 Flutter 和 AVM 没有在 NPM 上有对应的包，后边我单独再列。

下载量上比，RN 遥遥领先，Ionic 和 NativeScript 都不够看， RN绝对第一，Ionic 比 NativeScript 好一点，从 issues 上来看，NativeScript 好一点，但是可能是因为用户太少导致的。Ionic 和 NativeScript 全加起来，还不如 RN一个零头。我们再看 Flutter 和 AVM，因为没有找到对应的包和下载量，我们摘取 http://statista.com 的开发者开发用时数据来看一下 https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/。

可以看出到得出的数据和我们上边的结果类似，Ionic 和 NativeScript 的总份额2021年只有16%+5%=21%，Flutter第一42%， RN第二38%。可以看到Flutter 从2019年到2021年逐步在上升，最终在2021年反超 RN。

以上是几个主要框架的主仓库的对比情况，数据来自 https://www.githubcompare.com/ 从中可以看出来，从 stars 和 forks 上来说 Flutter 和 RN 基本就是老大和老二，从  open issues 上看RN 比 Flutter 更优，时间上看大家都是7，8年前开始做的，更新情况也差不多。我们再从搜索引擎热词上做一下分析。

从 Google Trends 的结果来看，国内 apicloud，ionic，nativescript 的热度差不多，react native 和 flutter 今年对比来看，国内更多的人开始转向 flutter。4.2 API 支持，组件丰富程度这部分从 API 层面对比五个框架对原生能力的支持情况和组件支持的情况。前面我简单的开发了个 list 功能，我们下边对比下各个框架的基础组件个数（含布局组件）和API能力。框架组件个数系统API/Plugin个数开发体验RN3433React无缝切入Flutter171104Dart语法，有一定门槛和适应时间Ionic90291支持 React，Vue，Angularjs，JS，TSNativeScript3187实时调试能力太弱AVM31219实时调试能力强，类 Vue 语法兼容 React JSX来源参考： RN 组件：https://reactnative.dev/docs/components-and-apisRN API：https://reactnative.dev/docs/accessibilityinfo Flutter 组件：https://docs.flutter.dev/reference/widgetsFlutter API：https://api.flutter-io.cn/ Ionic 组件：https://ionicframework.com/docs/componentsIonic API：https://ionicframework.com/docs/nativeNativeScript 组件：https://docs.nativescript.org/ui-and-styling.htmlNativeScript API：https://docs.nativescript.org/api-reference/index.html AVM 组件：https://docs.apicloud.com/apicloud3/AVM API：https://docs.apicloud.com/Client-API/api 数据上虽然差别比较大，比如 RN 的 API 和组件数虽然少一些，但是都是按模块划分的。比如某单个 API Class 下其实是有不少方法可以实现很多能力的。这里只列举了数量，只是提供了一个比较粗略的，对学习成本的一个初步直观的感觉，真的够不够用还是需要真实开发过复杂应用才有绝对话语权。我个人觉得在开发体验上，Flutter 是独一档的。因为 Dart 和TS，JS 都不太一样，整个 UI 开发概念和前端还是有一些理念冲突。其他使用 JavaScript 技术开发的框架，AVM，RN，Ionic 其实都还不错。但是 Ionic 支持使用各种不同 JS 库来开发，比如 React，Vue，NG 等，而 AVM 支持 Vue 、react语法特性， RN 则必须是 React。NativeScript 虽然也支持不同的前端框架开发，但是整个开发体验则是最差的，他的实时编译，debug 功能以及布局系统真的很烂，我这里不推荐再入坑了，用户少真的是有原因的，比如我这个初学者，看完他们的布局文档就直接给我劝退了。而且纵观所有框架，文档写的最细致还是 RN 和 Flutter，AVM这三家。但是RN 和 Flutter 本土化程度不够， Ionic 和 NativeScript 则是国内资料比较少且文档比较糊弄，而且都很久不更新了。五，总结虽然前面我从不同的角度分析了各个框架的情况，比如上手，开发环境以及简单的性能对比，生态情况等。但是读者应该不难看出，我其实对于这些框架来说，也只能说是个新手，这篇文章整体下来，只是客观的记录了我对不同框架初次上手和调研情况的一个过程。所以难免有一些地方会有一些个人倾向，我觉得也在所难免。从性能上看AVM 的开发体验和编译速度，性能表现都非常好，虽然是国产的框架但是不比国外的要差，其次是Flutter，RN，最后是 Ionic 和 NativeScript。从开发体验上来说，比较舒服的是RN，Ionic这两个，其次是Flutter和 AVM，Flutter 是因为 Dart 语法，但需要单独学习，中小企业选型以及个人开发者需要考虑；而 AVM 则不支持 TS和其他语言框架，只支持 JS 语法。最差的是 NativeScript，基本上没法实时调试，API 也非常的不友好。总结下来，我觉得2021年最火的当属 Flutter，已经赶超了 RN。整体上看国内外用户目前的选择和份额也大部分被 Flutter和 RN 瓜分殆尽。其他框架中 AVM和 Ionic 各有优势，但是从使用体验，上手难度，社区情况来看，国内的 AVM 肯定更适合国内开发者一些，毕竟有本土化，云端集成，而且debug体验也很惊艳。所以大厂直接上 Flutter 是没有问题的，Dart 没有太大难度，这部分成本不是问题。而其他公司和个人开发者如果做国内市场选择 AVM，RN 还是比较合适的（相比较 NativeScript 和 Ionic，AVM天然支持国内的小程序，是重要加分项，而 RN的文档，生态则比较多），最后如果考虑 desktop 的适配，那么 Flutter 看起来就更合适一些了。

回复

文章点评

2022-04-26 09:16

手机GIF动画制作软件哪个好？6款手机GIF制作APP推荐

　　我们经常能看到视频做成的GIF动画表情，以前GIF动画智能通过电脑软件制作，不过如 <详情>

2022-04-26 10:02

推荐10个超级棒的英语学习APP

现代社会的人，基本上已经没有办法不接触英语了，英语作为世界最通行的语言，就算在国 <详情>

2022-04-26 10:07

App开发、小程序开发该如何选择技术开发公司？

术业有专攻。一个好的开发团队对做好一款App至关重要，好的团队会有专业且标准的需求 <详情>

2022-04-26 10:28

如何用手机远程协助长辈？我找出了6个最佳方法！（免ROOT ...

最近我婆婆头一次换了部智能手机，难免这也得教那也得教但毕竟没办法随时亲身面授，我 <详情>

2022-04-26 10:46

如何在M1的MacBook中安装手机App？| 竟有点实用！

这篇文章的主题其实非常简单，就是在M1的MacBook上安装手机的App。但一开始我觉得这个 <详情>

2022-04-26 10:51

推荐16个非常棒的在线学习APP

现在的人们，每天日常生活中，基本上是已经完全离不开手机了，我也经常玩手机，在手机 <详情>

2022-04-26 11:07

手机App确实在偷听你谈话，方法死都想不到

早在去年就有用户发现：只要和朋友聊天时提到某样商品，打开购物软件，立刻就会收到相 <详情>

2022-04-26 12:53

市场部、运营部、品牌部，别傻傻分不清楚！

摘要：市场、运营、品牌、公关、新媒体、策划……，如何区分这些似是而非的职能，看这 <详情>

2022-04-26 12:56

运营知识应该从何学习？

先学理论，再get技能，最后用学到的这些运营理论+技能做出真实有数据的运营项目，完整 <详情>

2022-04-26 13:18

搞用户运营的看过来！蔚来、理想、小鹏、威马APP用户 ...

我是做社区运营工作的。上个星期我在面试社区运营的候选人，我问她在国内你认为运营最 <详情>

相关分类