React Native 转 Flutter 学习路线

如果面试官问 "React Native 转 Flutter 难吗？" 或 "你是 React Native，为什么能做 Flutter？"，这是近两年前端岗位很常见的问题。

对于已经有 React Native + TypeScript + 原生开发（iOS/Android） 经验的人来说，Flutter 的学习成本并不高，真正需要学习的是 Dart + Flutter Widget 思维。

下面按面试角度整理，左列为 React Native，右列为 Flutter，方便对照查看。

详细 API 对照与逐条代码示例，见 Flutter 官方文档：给 React Native 开发者的 Flutter 指南。本文侧重学习路线与面试表达；官方文档可作为查询手册（Dart 语法、Widget 对照表、导航、手势、表单、动画等）。

学习路线总览

阶段	React Native	Flutter	预估时间
1	TypeScript / JavaScript	Dart	1～2 天
2	组件 + Virtual DOM 思维	Widget + RenderObject 思维	3～5 天
3	`useEffect` 生命周期	`initState` / `dispose`	1 天
4	Redux / Zustand / Context	Riverpod / Bloc	2 天
5	React Navigation	go_router	1 天
6	axios	dio	0.5 天
7	MMKV / AsyncStorage	Hive / SharedPreferences	1 天
8	Reanimated	AnimationController	3 天
9	Native Module / JSI	Platform Channel / FFI	已有原生经验则很快
10	Metro / npm	flutter tool / pub	1 天

第一阶段：Dart（1～2 天）

React Native 开发者基本已经有 JS/TS 基础，Dart 和 TypeScript 非常像。

TypeScript

class User {
  name: string

  constructor(name: string) {
    this.name = name
  }
}

Dart

class User {
  String name;

  User(this.name);
}

React Native 侧（已有）	Flutter 侧（需补）
TypeScript 类型系统	null safety
Promise	Future
async/await	async/await（语法几乎一致）
EventEmitter / Observable	Stream
—	Extension
泛型	泛型
—	mixin

基本一天就能上手。

第二阶段：理解 Flutter 思维（重点）

常用组件对照

React Native	Flutter	说明
`<View>`	`Container` / `Column` / `Row` / `Center` / `Padding`	布局容器，按场景选型
`<Text>`	`Text`
`<Image>`	`Image` / `Image.asset` / `Image.network`
`<ScrollView>`	`ListView`	少量子项
`<FlatList>`	`ListView.builder`	长列表按需构建
`<TouchableOpacity>`	`GestureDetector` / `TextButton` / `ElevatedButton`	点击用 Button 或 GestureDetector
`<Button>`	`ElevatedButton` / `TextButton`
`<TextInput>`	`TextField` + `TextEditingController`
`<Switch>`	`Switch`
`<ActivityIndicator>`	`CircularProgressIndicator` / `LinearProgressIndicator`
`<RefreshControl>`	`RefreshIndicator`	下拉刷新
`<Modal>`	`ModalRoute`
—	`Scaffold`	页面骨架（AppBar、Drawer 等）

渲染架构对照

React Native

React
  ↓
Virtual DOM
  ↓
Bridge
  ↓
Native View

Flutter

Widget
  ↓
Element
  ↓
RenderObject
  ↓
Skia
  ↓
GPU

维度	React Native	Flutter
是否有 DOM	无（但有 Bridge 到 Native View）	无
组件本质	描述 UI 的 React 元素	Widget 只是配置
真正负责布局	Yoga + Native View	`RenderObject`
更接近的框架	—	Compose / SwiftUI / Jetpack Compose

Flutter 没有 DOM，Widget 只是配置，真正负责布局的是 RenderObject。

第三阶段：生命周期

React Native

useEffect(() => {
  // mount / update

  return () => {
    // cleanup
  }
}, [])

Flutter

@override
void initState() {
  super.initState();
}

@override
void didUpdateWidget(covariant MyWidget oldWidget) {
  super.didUpdateWidget(oldWidget);
}

@override
void dispose() {
  super.dispose();
}

React Native	Flutter
`useEffect`（mount / deps 变化）	`initState` / `didUpdateWidget`
cleanup 函数	`dispose`

第四阶段：状态管理

React Native	Flutter
Redux	Bloc
MobX	MobX
Zustand	—
Jotai	—
Context	Provider
—	Riverpod（推荐）
—	GetX

目前企业里面：Riverpod 越来越多，Bloc 大厂很多。

第五阶段：导航

React Native	Flutter
React Navigation	Navigator
—	go_router（推荐）
`navigation.navigate('Screen')`	`context.go('/path')`
`navigation.push('Screen')`	`context.push('/path')`

第六阶段：网络请求

React Native	Flutter
axios	dio
`axios.get(...)`	`dio.get(...)`

几乎一样。

React Native

axios.get('/api/users')

Flutter

dio.get('/api/users')

第七阶段：本地存储

React Native	Flutter
MMKV	Hive
AsyncStorage	SharedPreferences
SQLite	SQLite
—	Isar

第八阶段：动画

React Native	Flutter
Animated	AnimationController
Reanimated	Tween
—	AnimatedContainer
—	Hero

Flutter 自带动画系统，性能很好。

第九阶段：原生通信

React Native	Flutter
Native Module	Platform Channel
TurboModule	MethodChannel
JSI	EventChannel
—	FFI

如果你已经写过 Objective-C、Swift、Java、Kotlin，Flutter Platform Channel 非常容易。

第十阶段：工程化

React Native	Flutter
Metro	`flutter build` / flutter tool
Gradle	Gradle
CocoaPods	CocoaPods
Fastlane	Fastlane
`package.json`	`pubspec.yaml`
npm / yarn / pnpm	pub

RN 与 Flutter 综合对比

React Native	Flutter
JS Runtime	Dart VM
React	Widget
Virtual DOM	Element Tree
Bridge（旧架构）	无 Bridge
Fabric	RenderObject
Yoga	RenderObject Layout
JSX	Widget Tree
Metro	flutter tool
npm	pub
Redux	Riverpod
React Navigation	go_router
Axios	Dio
Native Module	MethodChannel

延伸阅读：官方对照手册

给 React Native 开发者的 Flutter 指南按主题组织，适合按需查阅：

主题	覆盖内容
Dart 入门	入口函数、变量、null safety、Future / async-await
项目结构	`main.dart`、`pubspec.yaml`、资源与依赖
视图与布局	View 等价容器、FlatList、Canvas、Column / Row / Stack
风格与主题	`TextStyle`、`ThemeData`、Icons / Colors
状态管理	`StatelessWidget` / `StatefulWidget` 最佳实践
存储 / 导航 / 网络	SharedPreferences、Navigator / Tab / Drawer、`http`
手势 / 表单 / 平台	`GestureDetector`、`TextField` / `Form`、`TargetPlatform`
调试 / 动画	热重载、DevTools、`AnimationController`
Widget 对照表	RN 组件与 Flutter Widget 完整映射

如果已经会 React Native，大概要多久？

模块	预估时间
Dart	2～3 天
Widget	3～5 天
状态管理	2 天
动画	3 天
跟着完成一个项目	约 1 周
能独立开发中小型 App	2～4 周

如果已有 React Native、TypeScript、Swift、Kotlin、原生模块开发经验，迁移会更快。

如果还具备 React Native 新架构（TurboModule、JSI）、原生模块开发和跨平台架构设计经验，迁移会更快，因为很多能力（如状态管理、路由、网络、原生通信、构建流程）都是可迁移的。

面试如何回答（推荐）

我主要使用 React Native 做跨平台开发，同时也有 Swift、原生模块和工程化经验。Flutter 与 React Native 在开发模式上有不少共通点，比如组件化、声明式 UI、状态管理和跨平台架构。对我来说，最大的学习点是 Dart 语言和 Flutter 的 Widget/RenderObject 渲染机制，而不是移动端开发本身。我认为在完成一个实际项目后，大约 2～4 周可以达到能够独立开发业务功能的水平。如果团队使用 Flutter，我有信心快速完成技术迁移。

学习路线总览​

第一阶段：Dart（1～2 天）​

第二阶段：理解 Flutter 思维（重点）​

常用组件对照​

渲染架构对照​

第三阶段：生命周期​

第四阶段：状态管理​

第五阶段：导航​

第六阶段：网络请求​

第七阶段：本地存储​

第八阶段：动画​

第九阶段：原生通信​

第十阶段：工程化​

RN 与 Flutter 综合对比​

延伸阅读：官方对照手册​

如果已经会 React Native，大概要多久？​

面试如何回答（推荐）​

学习路线总览

第一阶段：Dart（1～2 天）

第二阶段：理解 Flutter 思维（重点）

常用组件对照

渲染架构对照

第三阶段：生命周期

第四阶段：状态管理

第五阶段：导航

第六阶段：网络请求

第七阶段：本地存储

第八阶段：动画

第九阶段：原生通信

第十阶段：工程化

RN 与 Flutter 综合对比

延伸阅读：官方对照手册

如果已经会 React Native，大概要多久？

面试如何回答（推荐）