NeoXmind 数字花园

跨平台移动开发框架对比

9分钟阅读

跨平台移动开发框架对比：Flutter / React Native / uni-app

一句话总结

Flutter — 自绘引擎，像素级一致，控制力最强 React Native — 原生组件映射，Web 团队无缝上手 uni-app — Vue 语法，一套代码发布全平台，国内小程序生态最强

一、基本信息

FlutterReact Nativeuni-app
出品方GoogleMeta（Facebook）DCloud
开源时间201720152018
开发语言DartJavaScript / TypeScriptJavaScript / TypeScript（Vue 语法）
框架语法Widget 树（声明式）React JSX + HooksVue 2 / Vue 3（Options API / Composition API）
上手门槛需要学 Dart + Widget 概念会 React 即可会 Vue 即可，门槛最低

二、渲染机制

这是三者最本质的区别。

FlutterReact Nativeuni-app
渲染方式自绘引擎（Impeller/Skia），自己画每个像素映射为平台原生组件多端编译：App 端用原生渲染（weex 引擎）或 WebView；小程序端编译为各平台小程序代码；H5 端就是 Web
两端一致性像素级一致（自己画的当然一样）基本一致，细节可能有平台差异App 端基本一致；小程序端受各平台限制
平台融合感需要手动适配平台风格天然原生风格App 端接近原生；小程序端就是原生小程序

类比

  • Flutter：自带画板和画笔，在哪都自己画
  • React Native：翻译官，把你说的话翻译给平台原生组件听
  • uni-app：万能适配器，同一个插头根据不同国家的插座自动转换形状

三、平台覆盖

平台FlutterReact Nativeuni-app
iOS官方支持官方支持支持
Android官方支持官方支持支持
微信小程序不支持不支持支持
支付宝/百度/抖音/QQ 小程序不支持不支持支持
快应用不支持不支持支持
H5（移动 Web）官方支持（体验一般）第三方（React Native Web）支持
桌面（Windows/macOS/Linux）官方支持社区方案不支持

uni-app 的杀手锏

国内市场绑不开微信小程序。Flutter 和 React Native 都不能直接编译为小程序，uni-app 可以一套代码同时发布到 App + 各家小程序 + H5，这在国内是巨大的优势。

四、性能

FlutterReact Nativeuni-app
App 端性能最接近原生，Impeller 引擎直接绘制接近原生（新架构 JSI 直接调用）取决于渲染模式：原生渲染接近 RN，WebView 模式较差
动画流畅度最佳，渲染引擎直接控制需要 Reanimated 库才能达到流畅复杂动画是短板
启动速度AOT 编译为机器码，快JS 引擎加载，稍慢首次启动较慢（需要初始化运行环境）
列表性能优秀优秀（FlatList 虚拟化）长列表是已知痛点，需要优化
包体积~5-8MB（自带引擎）~2-4MB~5-10MB（自带运行时）

简单排序

纯 App 性能：Flutter ≥ React Native > uni-app（原生渲染）> uni-app（WebView）

五、开发体验

FlutterReact Nativeuni-app
热重载极快，状态保持快，状态保持支持，速度一般
IDEAndroid Studio / VS CodeVS CodeHBuilderX（官方 IDE）/ VS Code
调试工具DevTools（优秀）React DevTools / Expo Dev ToolsHBuilderX 内置调试
类型安全Dart 强类型 + 空安全TypeScript 可选TypeScript 可选
包管理pub.devnpmnpm + DCloud 插件市场
文档质量英文文档优秀英文文档优秀中文文档齐全，对国内开发者最友好

六、生态与社区

FlutterReact Nativeuni-app
全球社区大，增长快最大小（主要在国内）
国内社区活跃活跃最活跃，中文资源最多
插件/组件pub.dev ~4 万+npm 百万级DCloud 插件市场 + npm
UI 组件库内置 Material/CupertinoPaper、gluestack-ui、TamaguiuView、uni-ui、TuniaoUI
原生能力扩展Platform Channel（需写原生代码）Expo Modules / Native Modules原生插件市场（很多现成的，不需要自己写）
状态管理Riverpod、BlocZustand、Redux ToolkitPinia、Vuex
SSR 框架无成熟方案Next.js（Web 端）不涉及

七、代码风格对比

同一个计数器，三种写法：

Flutter（Dart）

class Counter extends StatefulWidget {
  @override
  State<Counter> createState() => _CounterState();
}
 
class _CounterState extends State<Counter> {
  int count = 0;
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('点了 $count 次', style: TextStyle(fontSize: 24)),
          ElevatedButton(
            onPressed: () => setState(() => count++),
            child: Text('点击'),
          ),
        ],
      ),
    );
  }
}

React Native（TypeScript）

import { useState } from 'react'
import { View, Text, Button, StyleSheet } from 'react-native'
 
export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <View style={styles.container}>
      <Text style={styles.text}>点了 {count} 次</Text>
      <Button title="点击" onPress={() => setCount(count + 1)} />
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 24, marginBottom: 16 },
})

uni-app（Vue 3）

<template>
  <view class="container">
    <text class="text">点了 {{ count }} 次</text>
    <button @click="count++">点击</button>
  </view>
</template>
 
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
 
<style scoped>
.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
.text { font-size: 24px; margin-bottom: 16px; }
</style>

直观感受

  • Flutter：嵌套最深，Widget 套 Widget，括号多
  • React Native：JSX 结构清晰，JS 风格
  • uni-app：最接近写网页的体验——HTML 模板 + CSS 样式 + JS 逻辑，前端开发者最熟悉

八、商业与就业

FlutterReact Nativeuni-app
国内就业中大厂有岗位，增长中岗位较多外包/中小公司/创业团队大量使用
海外就业岗位增长快最多几乎没有
典型用户阿里（闲鱼）、字节、GoogleMeta、Shopify、Microsoft大量国内中小企业、政务应用
适合创业团队适合（跨平台一致）适合（生态成熟）最适合（一套代码打全平台，省人省钱）

九、选型建议

按团队背景选

团队背景推荐原因
Vue 开发者uni-app语法零成本迁移
React 开发者React Native知识完全复用
移动端原生开发者FlutterDart OOP 风格接近 Swift/Kotlin
全栈新手uni-app学习成本最低，文档全中文

按项目需求选

需求推荐原因
必须发布微信小程序uni-appFlutter 和 RN 都不支持
App + 各家小程序 + H5 全平台覆盖uni-app唯一能一套代码打全平台的
追求极致性能和动画Flutter自绘引擎，控制力最强
两端 UI 像素级一致Flutter自己画的当然一样
融入平台原生风格React Native本来就是原生组件
Web 和 Mobile 共享代码React NativeReact 生态无缝复用
预算有限、快速上线uni-app开发效率最高，插件市场现成方案多
海外市场Flutter 或 React Nativeuni-app 海外生态几乎为零
桌面端也要覆盖Flutter官方支持 Windows/macOS/Linux

一句话版

Quote

  • 要小程序 → uni-app，没得选
  • 要极致体验 → Flutter
  • 要Web 团队快速出活 → React Native（React 系）或 uni-app（Vue 系）
  • 要省钱打全平台 → uni-app
  • 要海外市场 → Flutter 或 React Native

相关笔记

关系图谱