React Native 与 Flutter 跨平台方案深度对比

# React Native 与 Flutter 跨平台方案深度对比 ## 渲染机制差异 ### React Native：Bridge 架构 ``` JavaScript 线程 Native 线程 (React 逻辑) (UIKit/Android Views) ``` 新架构（Fabric + TurboModules）用 JSI 替代 Bridge，性能大幅提升。 ### Flutter：自绘引擎 ``` Dart 代码 --> Skia/Impeller 引擎 --> GPU 直接渲染 ``` 不依赖原生组件，UI 一致性更高。 ## 代码对比 ### React Native ```jsx import React, { useState } from 'react'; import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native'; function TodoApp() { const [todos, setTodos] = useState([ { id: '1', text: '学习 React Native', done: false }, { id: '2', text: '阅读技术博客', done: true }, ]); const toggleTodo = (id) => { setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t )); }; return ( item.id} renderItem={({ item }) => ( toggleTodo(item.id)}> {item.text} )} /> ); } ``` ### Flutter ```dart class TodoApp extends StatefulWidget { @override State createState() => _TodoAppState(); } class _TodoAppState extends State { final List> todos = [ {'id': '1', 'text': '学习 Flutter', 'done': false}, {'id': '2', 'text': '阅读技术博客', 'done': true}, ]; void toggleTodo(String id) { setState(() { final todo = todos.firstWhere((t) => t['id'] == id); todo['done'] = !todo['done']; }); } @override Widget build(BuildContext context) { return ListView.builder( itemCount: todos.length, itemBuilder: (context, index) { final todo = todos[index]; return ListTile( title: Text( todo['text'], style: TextStyle( decoration: todo['done'] ? TextDecoration.lineThrough : TextDecoration.none, ), ), onTap: () => toggleTodo(todo['id']), ); }, ); } } ``` ## 综合对比 | 维度 | React Native | Flutter | |------|-------------|---------| | 语言 | JavaScript/TypeScript | Dart | | 性能 | 良好（新架构后接近原生） | 优秀（60/120fps） | | 热重载 | 支持 | 支持（更稳定） | | 包体积 | 较小 | 较大（含引擎） | | 生态 | npm 海量库 | pub.dev 快速增长 | | 学习曲线 | 前端开发者友好 | 需学习 Dart | | Web 支持 | 有限 | 成熟 | ## 选型建议 1. 团队以前端为主 -> React Native 2. 追求 UI 一致性和性能 -> Flutter 3. 需要 Web + Mobile 统一 -> Flutter 4. 已有 React Web 项目 -> React Native（代码复用）