跳到主要内容

React Native / Flutter 架构对比

⚛️ 跨端方案各有所长。时隔选择需要考虑团队技能栈、性能要求和原生能力依赖。

架构樯比​

维度React NativeFlutter
语言JavaScript/TypeScriptDart
渲染方式调用原生组件自绘控件（Skia/Impeller）
性能库设计影响接近原生
原生观感最佳（用原生组件）可配置，非默认
团队门槛Web 开发者可上手需学 Dart
库生态较成熟成长快，最决主流

React Native 架构​

新架构（Fabric + JSI + TurboModules）​

JS 线程 ↔ JSI 直接调用 C++（元 Bridge 序列化）
                ↓
        Fabric 渲染层（C++ 实现）
                ↓
         原生 UI 树

常用性能技巧​

// 1. 使用 useMemo/useCallback 避免不必要重渲染
const expensiveValue = useMemo(() => compute(data), [data])

// 2. FlatList 实现超长列表
const keyExtractor = useCallback((item) => item.id.toString(), [])

// 3. Hermes 引擎（默认开启）提升 JS 执行性能

原生模块集成​

// 调用 Native 函数
import { NativeModules } from 'react-native'
const { MyNativeModule } = NativeModules
await MyNativeModule.doSomething(params)

// 采用新的 Turbo Modules
import NativeMyModule from './NativeMyModule'

Flutter 架构​

Widget 树 → Element 树 → RenderObject 树​

Widget：轻量级用户描述（不可变）
Element：维护生命周期（可变）
RenderObject：实际渲染和绘制

状态管理​

// setState — 简单局部状态
class _CounterState extends State<Counter> {
  int _count = 0;
  void _increment() => setState(() => _count++);
}

// Riverpod — 推荐的状态管理
final counterProvider = StateNotifierProvider<CounterNotifier, int>(
  (ref) => CounterNotifier(),
);

// BLoC — 企业级状态管理
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<Increment>((event, emit) => emit(state + 1));
  }
}

平台通信（Platform Channel）​

// Dart 调用原生代码
const channel = MethodChannel('com.example/native');
final result = await channel.invokeMethod<String>('getBatteryLevel');

选型建议​

场景推荐方案原因
Web 团队做移动端React Native技能迁移成本低
性能要求高Flutter渲染性能优秀
UI 高度自定义Flutter自绘引擎不依赖原生组件
需要深度原生集成原生性能/能力无折耐

常见误区​

  • 高估跨端框架的可移植性，Bridge/Channel 通信并非免费
  • Flutter Widget 重建频繁，应将可变部分尽量下丢小
  • React Native 用山 useState 而不分层，导致页面全量重渲染