Posted Updated Cross-Platform19 minutes read (About 2878 words)

Android / iOS / 鸿蒙 / React / Flutter 响应式编程共同点分析

由浅入深，从基本概念到源码原理，再到实战案例，系统梳理五大主流开发框架中的响应式编程共性与差异

一、什么是响应式编程？

1.1 从命令式到声明式

无论使用哪个平台，传统命令式编程的本质都是「我告诉程序每一步该做什么」：

1
2
3
4
5
6
7
8
9
// Android 命令式：手动监听 + 条件判断
editText.addTextChangedListener(object : TextWatcher {
    override fun onTextChanged(s: CharSequence?, p1: Int, p2: Int, p3: Int) {
        val text = text.toString()
        if (text.length >= 3) {
            searchUsers(text)
        }
    }
})
1
2
3
4
5
6
// iOS 命令式：Target-Action
textField.addTarget(self, action: #selector(textDidChange), for: .editingChanged)
func textDidChange() {
    let text = textField.text ?? ""
    if text.count >= 3 { searchUsers(text) }
}

响应式编程则将数据流（Data Stream）视为核心，用声明式方式描述「当数据变化时该做什么」：

1
2
命令式：监听 → 判断 → 执行
响应式：数据流 → 转换/过滤 → 订阅并响应

1.2 响应式编程的三大特征

特征 说明 跨平台体现
数据流 事件、状态、异步结果统一抽象为「流」 Observable / Signal / Stream / State
声明式 描述「是什么」而非「怎么做」 链式操作符、装饰器、Hooks
自动传播 依赖变化自动触发更新 订阅机制、依赖收集、重新渲染

1.3 五大平台的响应式方案概览

平台 主要方案 核心类型 特点
Android RxJava / Kotlin Flow Observable / Flow 操作符丰富，协程整合
iOS RAC / RxSwift Signal / Observable 热/冷信号、Cocoa 扩展
鸿蒙 ArkUI @State / @Observed 声明式 UI，装饰器驱动
React Hooks useState / useEffect 函数式、虚拟 DOM 驱动
Flutter Stream / ValueNotifier Stream / ChangeNotifier Dart 异步流、Listenable

二、核心概念共通点

2.1 观察者模式：统一的底层基石

所有响应式实现都以观察者模式为基础：有「被观察对象」和「观察者」，数据变化时通知观察者。

1
2
3
4
5
6
7
┌─────────────────┐         ┌──────────────────┐
│  数据源/生产者   │ ──────► │  观察者/消费者    │
│  (Observable等)  │  订阅   │  (Observer等)     │
└─────────────────┘         └──────────────────┘
        │                            ▲
        │  onNext / send / emit      │
        └────────────────────────────┘
平台 被观察者 观察者 订阅方式
Android RxJava Observable Observer subscribe()
Android Flow Flow Collector collect {}
iOS RAC Signal / SignalProducer Observer observe() / start()
React useState 返回值 组件 隐式（依赖 React 调度）
Flutter Stream / ValueNotifier StreamSubscription / addListener listen() / addListener()
鸿蒙 @State 变量 UI 组件 隐式（框架自动重绘）

2.2 可取消性（Disposable / 生命周期）

订阅通常会产生「可取消」的句柄，用于在合适时机释放资源，避免内存泄漏：

平台 取消句柄 典型用法
RxJava Disposable compositeDisposable.add()
Kotlin Flow Job / CoroutineScope viewModelScope.launch {}
RAC Disposable disposable.dispose()
React useEffect 清理函数 return () => cleanup()
Flutter StreamSubscription subscription.cancel()
鸿蒙 框架管理 组件销毁自动解绑

2.3 热流 vs 冷流（部分平台）

在 RxJava、RAC、Kotlin Flow 中，流有「热」「冷」之分：

类型 含义 典型场景
冷流 每次订阅才执行，每个订阅者独立收到完整数据 网络请求、文件读取
热流 无论是否订阅都会持续发送，多订阅共享同一流 按钮点击、通知、UI 事件

React / Flutter / 鸿蒙 的「状态」更接近热流：始终有一个当前值，变化时通知依赖方。

三、各平台实现原理浅析

3.1 Android：RxJava 与 Kotlin Flow

RxJava：基于 ReactiveX 规范，Observable 链式操作符，每次操作返回新 Observable，订阅时从上游向下游传递事件。

1
2
3
4
5
6
7
8
9
10
11
// RxJava 链式调用
Observable.create<String> { emitter ->
    emitter.onNext("Hello")
    emitter.onComplete()
}
.map { it.uppercase() }
.filter { it.length > 0 }
.subscribe(
    { println(it) },
    { it.printStackTrace() }
)

Kotlin Flow：冷流，基于协程，背压天然支持，与 StateFlow/SharedFlow 配合做 UI 状态和事件。

1
2
3
4
5
// Flow 冷流 + 操作符
flowOf(1, 2, 3)
    .map { it * 2 }
    .filter { it > 2 }
    .collect { println(it) }

LiveData：轻量级、生命周期感知，主线程回调，适合简单 UI 状态，官方推荐新项目用 Flow 替代。

3.2 iOS：ReactiveCocoa / ReactiveSwift

Signal：热信号，由 pipe() 创建，observer 控制发送。

1
2
3
let (signal, observer) = Signal<String, Never>.pipe()
signal.observeValues { print($0) }
observer.send(value: "Hi")

SignalProducer：冷信号，每次 start 执行一次，适合异步任务。

1
2
3
4
5
let producer = SignalProducer<String, Never> { obs, _ in
    obs.send(value: "Hello")
    obs.sendCompleted()
}
producer.startWithValues { print($0) }

3.3 鸿蒙 ArkUI：装饰器驱动的状态

ArkUI 用装饰器声明「可观察」的状态，状态变化自动触发 UI 更新：

1
2
3
4
5
6
7
8
9
10
11
12
// @State：组件内部状态
@State count: number = 0

// @Prop：父→子单向
// @Link：双向
// @Provide / @Consume：跨层级

// @Observed + @ObjectLink：嵌套对象
@Observed
class User {
  name: string
}

@ObservedV2 + @Trace（V2）：支持深层属性观察，解决嵌套对象不可观察的问题。

3.4 React：状态与副作用

React 的响应式体现在「状态驱动 UI」和「副作用与依赖同步」：

1
2
3
4
5
6
7
8
9
10
11
const [keyword, setKeyword] = useState('');
const [users, setUsers] = useState([]);

// 依赖 keyword 变化，自动重新执行
useEffect(() => {
  if (keyword.length < 3) return;
  const timer = setTimeout(() => {
    searchUsers(keyword).then(setUsers);
  }, 300);
  return () => clearTimeout(timer); // 清理
}, [keyword]);

状态变化 → 重新渲染 → 虚拟 DOM diff → 最小化 DOM 更新。

3.5 Flutter：Stream 与 Listenable

Stream：Dart 异步流，类似冷流，支持 map、where、asyncMap 等。

1
2
3
4
Stream.periodic(Duration(seconds: 1))
  .map((i) => i * 2)
  .take(5)
  .listen((value) => print(value));

ValueNotifier / ChangeNotifier：同步、轻量，配合 ValueListenableBuilder 做局部重建：

1
2
3
4
5
final counter = ValueNotifier<int>(0);
ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (_, value, __) => Text('$value'),
)

四、操作符与组合逻辑的共性

4.1 转换类：map / filter

操作符 含义 Android iOS RAC Flutter React
map 值转换 map {} .map {} .map() 派生 state
filter 过滤 filter {} .filter {} .where() 条件 + early return

4.2 组合类：combineLatest / merge

多流组合在各平台均有对应能力：

场景 RxJava RAC Flutter React
多源最新值 combineLatest combineLatest RxDart combineLatest2 多个 useState + useEffect
多流合并 merge merge StreamGroup.merge 自定义逻辑

4.3 扁平化：flatMap / switchMap

将「每个值 → 新流」展开，常用于搜索联想、取消旧请求：

平台 操作符 行为
RxJava flatMap / switchMap switchMap 只保留最新内层流
RAC flatMap(.latest) 新关键词取消上次请求
Flutter asyncExpand 类似 flatMap
React useEffect + 清理 依赖变化时清理上次 effect

4.4 时间控制：debounce / throttle

防抖、节流在搜索、滚动等场景通用：

平台 防抖 节流
RxJava debounce() throttleFirst/throttleLatest
RAC debounce() throttle()
Flutter debounce from rxdart throttle from rxdart
React 自定义 setTimeout + cleanup useThrottle / lodash

五、源码层面的共通原理

5.1 链式结构与包装

操作符通常不修改原流，而是返回新的「包装流」，内部订阅上游并转换后传给下游：

1
2
3
4
5
6
7
8
9
Observable.map(f)
    │
    ├─ 创建 MapObservable
    │      │
    │      ├─ source = 上游 Observable
    │      └─ mapper = 转换函数 f
    │
    └─ subscribe 时：上游.subscribe(下游的包装 Observer)
                       下游 Observer 收到值时：onNext(mapper(value))

RAC 的 map 也是类似结构：Signal { observer in self.observe { ... observer.send(value: transform($0)) } }。

5.2 订阅传播

订阅是「从下游往上游」建立，事件是「从上游往下游」传递：

1
2
3
4
5
6
subscribe(observer)
  → 下游 Observable 订阅其 source
    → 再往上游订阅
      → … 直到最顶层
        → 顶层开始 onNext/onComplete
          → 层层传递到最下游

5.3 取消传播

Disposable / Job 形成链：取消下游会向上传递，终止整条链的执行。

六、跨平台示例：搜索防抖 + 取消旧请求

6.1 Android (RxJava)

1
2
3
4
5
6
7
8
RxTextView.textChanges(searchEditText)
    .map { it.toString() }
    .filter { it.length >= 2 }
    .debounce(300, TimeUnit.MILLISECONDS)
    .switchMap { keyword -> api.searchUsers(keyword).toObservable() }
    .observeOn(AndroidSchedulers.mainThread())
    .subscribe({ users -> updateUI(users) }, { it.printStackTrace() })
    .addTo(compositeDisposable)

6.2 iOS (RAC)

1
2
3
4
5
6
7
8
9
10
searchTextField.reactive.continuousTextValues
    .filter { ($0 ?? "").count >= 2 }
    .debounce(0.3, on: QueueScheduler.main)
    .flatMap(.latest) { keyword in
        searchAPI(keyword ?? "")
    }
    .observe(on: UIScheduler())
    .observeValues { [weak self] users in
        self?.updateSearchResults(users)
    }

6.3 鸿蒙 (ArkUI)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@State keyword: string = ''
@State users: User[] = []
private timer: number = -1

onInputChange(value: string) {
  this.keyword = value
  clearTimeout(this.timer)
  if (value.length < 2) return
  this.timer = setTimeout(() => {
    SearchAPI.searchUsers(value).then((users: User[]) => {
      this.users = users
    })
  }, 300)
}

6.4 React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const [keyword, setKeyword] = useState('');
const [users, setUsers] = useState([]);

useEffect(() => {
  if (keyword.length < 2) return;
  const timer = setTimeout(() => {
    let cancelled = false;
    searchUsers(keyword).then(data => {
      if (!cancelled) setUsers(data);
    });
    return () => { cancelled = true; };
  }, 300);
  return () => clearTimeout(timer);
}, [keyword]);

6.5 Flutter

1
2
3
4
5
6
7
8
9
10
11
12
13
final _keyword = StreamController<String>.broadcast();
final _users = ValueNotifier<List<User>>([]);

_keyword.stream
  .where((s) => s.length >= 2)
  .transform(StreamTransformer.fromHandlers(
    handleData: (data, sink) => Timer(Duration(milliseconds: 300), () => sink.add(data)),
  ))
  .asyncMap((k) => searchAPI(k))
  .listen((users) => _users.value = users);

// 输入时
_keyword.add(controller.text);

七、实际项目应用案例

7.1 登录表单校验（多字段组合）

需求：用户名 ≥3 字符、密码 ≥6 字符时，登录按钮才可点击。

平台 实现要点
RxJava combineLatest(username, password).map { u, p -> u.length>=3 && p.length>=6 }
RAC Signal.combineLatest(username.signal, password.signal).map { … }
React useMemo 派生 canLogin = user.length>=3 && pwd.length>=6
Flutter ValueNotifier 或 Stream，combineLatest2 派生
鸿蒙 @State user/pwd，computed 或 @Computed 派生 canLogin

7.2 多数据源合并展示

需求：本地缓存 + 网络接口合并去重后展示。

各平台通用思路：

  1. 本地流 + 远程流
  2. combineLatest / zip / merge 合并
  3. map 去重、排序
  4. 订阅结果更新 UI

7.3 列表下拉刷新 + 分页加载

需求：下拉刷新、上拉加载更多，防重复请求。

  • 用 Subject / PublishSubject 表示下拉、触底事件
  • debounce 防抖
  • flatMap/switchMap 发起请求，合并到单一列表流
  • 错误重试、loading 状态管理

7.4 电商 App 购物车总价

需求：商品数量、价格变化时，实时计算总价。

  • 每个商品的数量、单价作为流/状态
  • combineLatest 合并所有项
  • map/reduce 计算总价
  • 单一订阅更新总价 UI

八、各平台选型建议

场景 Android iOS 鸿蒙 React Flutter
新项目 优先 Kotlin Flow RAC/RxSwift ArkUI 原生 Hooks Stream + ValueNotifier
复杂异步流 RxJava / Flow RAC 自定义 + Promise useEffect + 自定义 Hook rxdart
简单 UI 状态 StateFlow / LiveData @Published @State useState ValueNotifier
跨层级状态 ViewModel + StateFlow 单例 + Property @Provide/@Consume Context/Redux Provider/Riverpod

九、共同的最佳实践

  1. 生命周期绑定：订阅要在页面/组件销毁时取消，避免泄漏。
  2. 线程/调度：UI 更新必须在主线程/主 Isolate，注意 observeOn / UIScheduler。
  3. 防抖与节流：输入、滚动等高频事件务必做时间控制。
  4. 取消旧请求：搜索、联想场景用 switchMap / flatMap(.latest) 或 useEffect 清理。
  5. 错误处理：onError / catch / retry 统一处理，避免吞掉异常。
  6. 弱引用：闭包中 [weak self] / WeakReference，防止循环引用。

十、总结

维度 共性
本质 观察者模式 + 数据流抽象
思想 声明式、数据驱动、自动传播
操作符 map、filter、combine、flatMap、debounce 等在各平台都有对应
取消 Disposable / 清理函数 / 生命周期绑定
热/冷 部分平台区分热流（共享）与冷流（按需执行）
应用 表单校验、搜索联想、多源合并、列表分页、实时计算

掌握这些共性后，从一个平台迁移到另一个平台时，可以快速找到对应概念和 API，写出一致、可维护的响应式代码。

参考资源

Follow

Links

Categories

Recents

Archives

Tags

Activity1
Android3
Architecture2
Blockchain1
Combine1
Component2
Components1
Concurrency1
Cross-Platform3
DevOps1
Electron2
Ethereum3
Event Loop1
Fiber1
Flutter4
GCD1
Hooks2
Hot Update2
Image Loading1
JSPatch1
JavaScript2
Jetpack Compose1
KMP1
Kotlin1
Modular2
Multithreading1
Native Bridge1
Next.js1
Nginx1
Node.js1
Objective-C1
Optimization1
Performance1
Platform Channel1
React5
React Native2
Reactive1
Reactive Programming1
ReactiveCocoa1
RunLoop1
Runtime1
RxJava1
RxSwift2
SDWebImage1
Service1
Solana1
State Management2
SwiftUI1
Tools2
VSCode1
Web34
ethers.js1
iOS10
npm1

Subscribe for updates

follow.it

×