如果从架构原理来看RNReact Native和 Flutter 最大的区别可以概括成一句话RNJavaScript/TypeScript 驱动原生 UIFlutterDart 驱动自己的渲染引擎。1. 整体架构对比React Native ┌──────────────────────────────┐ │ React / JS / TS │ │ Component / Hooks / State │ └──────────────┬───────────────┘ │ JS ↔ Native 通信 (现代 RN: JSI) │ ┌──────────────▼───────────────┐ │ React Native Runtime │ │ Fabric / TurboModules / JSI │ └──────────────┬───────────────┘ │ Native Components │ ┌───────┴───────┐ │ │ iOS UIKit Android ViewFlutter ┌──────────────────────────────┐ │ Dart App │ │ Widget / State / Business │ └──────────────┬───────────────┘ │ Flutter Framework │ ┌──────────────▼───────────────┐ │ Flutter Engine │ │ Dart Runtime Skia/Impeller │ └──────────────┬───────────────┘ │ GPU / Surface │ ┌──────┴──────┐ │ │ iOS Android2. 最核心的架构区别维度React NativeFlutter开发语言JS / TSDartUI 来源原生控件Flutter 自己绘制渲染React → RN → Native UIWidget → Engine → GPUJS/Dart 与 Native 通信JSI / TurboModules 等Platform Channels / FFI 等UI 抽象React ComponentWidget平台差异比较明显Flutter 层统一原生能力直接使用 Native 生态较方便需要 Plugin / Platform ChannelUI 一致性依赖 iOS/Android 原生实现跨平台一致性较强包体积通常较小通常相对较大性能模型JS 逻辑 Native UIDart 自有渲染引擎3. RN 的核心JS 驱动 Native早期 RN 经常被描述成JS │ │ Bridge ▼ Native │ ▼ UIView / Android View例如View TextHello/Text Button titleOK / /View最终并不是 RN 自己画一个 Button而是由 RN 的架构映射到平台对应的 Native View。现代 RN 已经发生了比较大的变化React ↓ Fabric ↓ JSI ↓ C / Native ↓ UIKit / Android所以现在讨论 RN 架构时最好不要再简单理解成JS → JSON Bridge → Native更准确的是React JS/TS Runtime JSI Fabric TurboModules Native Platform4. Flutter 的核心自己画 UIFlutter 的思路完全不同。你写Container( child: Text(Hello), )Flutter 并不是把Container转换成UIView Android View而是Widget ↓ Element ↓ RenderObject ↓ Flutter Engine ↓ Impeller ↓ GPU也就是说Flutter 的 Button、Text、List、ScrollView 等大量 UI 都是 Flutter 自己实现的。所以 Flutter 能做到同一份 Widget ↓ ┌─────┴─────┐ iOS Android └─────┬─────┘ ↓ Flutter Engine ↓ GPU这也是 Flutter 跨平台 UI 一致性比较强的根本原因。5. 两者最大的架构差异谁负责渲染这是面试里非常值得讲的一点。RNReact Component ↓ React Native ↓ Native Component ↓ UIKit / Android View ↓ 系统渲染所以 RN 更接近跨平台 React 层 原生 UI。FlutterFlutter Widget ↓ RenderObject ↓ Flutter Engine ↓ Impeller ↓ GPU所以 Flutter 更接近跨平台 UI 框架 自己的渲染体系。6. 这会直接影响性能假设有一个复杂列表1000 个 Cell ↓ 大量布局 ↓ 大量滚动 ↓ 动画RNJS/React ↓ RN ↓ Native View ↓ iOS / Android renderingFlutterDart ↓ Flutter Framework ↓ Engine ↓ GPU因此两者的性能瓶颈也不完全一样。RN 常见瓶颈JS 线程 ↓ JS 执行 / React 更新 ↓ JSI / Native ↓ Native UI特别是JS 计算太重大量 React 重渲染JS 与 Native 高频交互大型列表复杂动画Flutter 常见瓶颈更多会出现在Dart 逻辑Widget rebuildLayoutPaintGPU 渲染图片/Shader大量 Widget7. RN 为什么更容易接入原生生态因为 RN 的设计本身就非常接近React Native例如你已经有iOS SDK Android SDK可以通过 Native Module 暴露给 JSJS/TS ↓ TurboModule ↓ Swift / Objective-C Kotlin / Java所以如果一个公司已经拥有大量iOS Native 代码Android Native 代码原生 SDK原生组件RN 往往比较容易融入现有技术体系。8. Flutter 的 Native 通信Flutter 通常是Dart ↓ MethodChannel ↓ Swift / Kotlin例如Flutter │ │ MethodChannel ▼ Android Kotlin │ ▼ Native SDK或者Flutter │ │ Platform Channel ▼ iOS Swift当然 Flutter 也可以通过FFI直接调用 C/C 等 Native 能力。9. 架构思想上的区别可以把它们理解成两种路线RN复用 NativeReact │ React Native │ ┌──────────┴──────────┐ ▼ ▼ iOS Native Android Native │ │ UIKit View重点是尽可能利用已有的 Native 平台。Flutter抽象 NativeFlutter │ Flutter Widget │ Flutter Engine │ GPU ┌─────────┴─────────┐ ▼ ▼ iOS Android重点是尽可能把 UI 和渲染从 Native 平台抽离出来。10. 如果从“大型 App 架构”来看这时候两者差异就更有意思了。RN 通常是App │ ┌─────────┴─────────┐ │ │ Native Layer RN Layer │ │ iOS / Android React / TS │ │ Native SDK JS Business所以很适合Native 主体 RN 页面/业务模块例如一个大型 App原生 App Shell │ ├── 首页 —— RN ├── 商品 —— RN ├── 订单 —— RN ├── 支付 —— Native ├── 相机 —— Native └── 地图 —— NativeFlutter 更容易形成Flutter App │ ├── UI ├── State ├── Business ├── Network └── Navigation │ ↓ Platform Channel │ ┌─────┴─────┐ iOS Android也就是Flutter 更倾向于整个 App 使用 Flutter 架构。11. 一个非常好记的总结如果你正在准备RN / Flutter 面试可以直接记这张图跨平台方案 │ ┌─────────┴─────────┐ │ │ RN Flutter │ │ React / TS Dart │ │ Fabric Widget │ │ JSI Flutter Engine │ │ Native Components Impeller │ │ UIKit / Android GPU一句话RN 的核心是“JavaScript/React 驱动 Native UI”Flutter 的核心是“Dart/Widget 驱动自己的渲染引擎”。如果进一步往源码和底层架构深入最值得比较的是RN 的 Fabric JSI TurboModules和Flutter 的 Widget → Element → RenderObject → Engine → Impeller这部分也是两者真正拉开架构差异的地方。