由浅入深，从基本概念到源码原理，再到实战案例，系统梳理 Web、移动、原生各平台的状态管理方案

一、什么是状态管理？

1.1 状态（State）的本质

状态是应用在某一时刻的数据快照，它决定了 UI 的展示内容和行为。任何会随时间变化的数据——用户输入、网络请求结果、权限、主题——都可视为状态。

1
2
3
4
5
6
7
8
9

+------------+   +------------+   +------------+   +------------+
| User Input |   |  Biz Data  |   |  UI State  |   |   Server   |
| Form/Search|   | List/Detail|   |Modal/Load  |   |   Cache    |
+------+-----+   +------+-----+   +------+-----+   +------+-----+
      |                 |                 |                 |
      +-----------------+--------+--------+-----------------+
                         |
                         v
               UI 渲染 / 副作用执行

用户输入·业务数据·UI状态·服务端 → 汇聚为统一的 UI 渲染与副作用执行

1.2 为什么需要状态管理？

1.3 各平台状态管理方案概览

二、状态管理的核心原则与模式

2.1 单向数据流（Unidirectional Data Flow）

大多数现代框架采用「单向数据流」：状态向下流动，事件向上反馈。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

┌─────────────┐
│   State     │  ← 单一数据源
└──────┬──────┘
       │ 只读传递
       ▼
┌─────────────┐
│    View     │  → 用户操作
└──────┬──────┘
       │ 事件 / Action
       ▼
┌─────────────┐
│  Reducer /  │  → 计算新状态
│  setState   │
└──────┬──────┘
       │
       └──────────► 更新 State → 重新渲染

React、Redux、Flutter Bloc、Jetpack Compose 的 ViewModel 均遵循此模式。

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

状态管理大多基于观察者模式：被观察对象变化时，通知所有订阅者。

2.3 局部状态 vs 全局状态

三、Web 前端：React 与 Next.js

3.1 React 状态管理

3.1.1 基本概念：useState

useState 是 React 最基础的状态 Hook，返回当前值和更新函数：

1
2
3
4
5
6
7
8

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

原理简述：React 在内部维护 Fiber 树，每个组件对应一个 Fiber 节点，useState 将状态存储在 Fiber 的 memoizedState 链表中。更新时调度 setState，标记组件需要重渲染，之后执行 diff 并提交 DOM 变更。

3.1.2 派生状态与 useReducer

当状态逻辑复杂时，用 useReducer 集中处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

3.1.3 跨组件共享：Context

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Header />
      <Main />
    </ThemeContext.Provider>
  );
}

function Header() {
  const { theme } = useContext(ThemeContext);
  return <div className={theme}>...</div>;
}

注意：Context 变化会导致所有消费该 Context 的组件重渲染，可配合 useMemo / 拆分 Provider 优化。

3.1.4 副作用与依赖：useEffect

1
2
3
4
5
6
7
8
9
10

const [keyword, setKeyword] = useState('');
const [users, setUsers] = useState([]);

useEffect(() => {
  if (keyword.length < 2) return;
  const timer = setTimeout(() => {
    fetchUsers(keyword).then(setUsers);
  }, 300);
  return () => clearTimeout(timer);  // 清理函数
}, [keyword]);

3.2 Next.js 状态管理

Next.js 引入 Server Components 与 Client Components 的区分，状态管理策略随之变化。

3.2.1 服务端 vs 客户端状态

3.2.2 组合模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// app/page.tsx - Server Component（默认）
async function Page() {
  const data = await fetchFromDB();  // 服务端直接拉取
  return (
    <Layout>
      <StaticContent data={data} />
      <InteractiveCart />  {/* Client Component，内部用 useState */}
    </Layout>
  );
}

// components/InteractiveCart.tsx
'use client';
export function InteractiveCart() {
  const [items, setItems] = useState([]);
  return <CartUI items={items} onAdd={...} />;
}

3.2.3 Context 在 Next.js 中的使用

Context Provider 必须放在 Client Component 中：

1
2
3
4
5
6
7
8
9
10

// providers/ThemeProvider.tsx
'use client';
export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

四、跨平台移动：Flutter

4.1 基本概念

Flutter 的 UI 是声明式的：给定状态，构建对应 Widget 树。状态变化触发 setState 或 notifyListeners，进而重建 Widget。

4.2 内置方案

4.2.1 StatefulWidget + setState

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => setState(() => _count++),
      child: Text('$_count'),
    );
  }
}

4.2.2 ValueNotifier + ValueListenableBuilder（局部重建）

1
2
3
4
5
6
7

final counter = ValueNotifier<int>(0);

ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) => Text('$value'),
)
// 只有 ValueListenableBuilder 会重建，而非整棵子树

4.2.3 ChangeNotifier + Provider

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class CartModel extends ChangeNotifier {
  final List<Item> _items = [];
  void add(Item item) {
    _items.add(item);
    notifyListeners();
  }
}

// 根节点
ChangeNotifierProvider(create: (_) => CartModel(), child: MyApp())

// 子节点消费
context.watch<CartModel>();  // 监听变化并重建
context.read<CartModel>();   // 仅读取，不监听

4.3 进阶：Riverpod / Bloc

• Riverpod：编译期安全、可测试、不依赖 BuildContext
• Bloc：事件 → 状态 的显式映射，适合复杂业务流

五、iOS 原生：Swift、RxSwift、SwiftUI

5.1 Swift 传统方式

• 属性观察器：willSet / didSet
• KVO：observe(_:options:changeHandler:)
• 通知：NotificationCenter
• Delegate / 闭包回调

5.2 RxSwift 响应式状态

RxSwift 将状态抽象为流，通过 Observable / Subject 管理：

1
2
3
4
5
6
7
8
9
10
11

// 文本框输入 → 搜索
let searchResults = searchTextField.rx.text.orEmpty
    .debounce(.milliseconds(300), scheduler: MainScheduler.instance)
    .flatMapLatest { api.search($0) }
    .observe(on: MainScheduler.instance)

searchResults
    .bind(to: tableView.rx.items(cellIdentifier: "Cell")) { _, model, cell in
        cell.textLabel?.text = model.name
    }
    .disposed(by: disposeBag)

Subject 可同时作为观察者和被观察者，常用于「桥接」命令式代码与响应式流：

1
2
3
4
5
6
7
8

let buttonTaps = PublishSubject<Void>()
buttonTaps
    .flatMapLatest { api.fetchData() }
    .subscribe(onNext: { updateUI($0) })
    .disposed(by: disposeBag)

// 命令式触发
button.rx.tap.bind(to: buttonTaps).disposed(by: disposeBag)

5.3 SwiftUI 声明式状态

5.3.1 @State：组件内部值类型状态

1
2
3
4
5
6

struct CounterView: View {
    @State private var count = 0
    var body: some View {
        Button("Count: \(count)") { count += 1 }
    }
}

5.3.2 @Binding：父子双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13

struct ParentView: View {
    @State private var isOn = false
    var body: some View {
        ToggleView(isOn: $isOn)  // 传递 Binding
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool
    var body: some View {
        Toggle("", isOn: $isOn)
    }
}

5.3.3 @ObservedObject / @StateObject：引用类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class UserViewModel: ObservableObject {
    @Published var name = ""
    @Published var isLoading = false
}

struct ProfileView: View {
    @StateObject private var viewModel = UserViewModel()  // 创建并持有
    var body: some View {
        Text(viewModel.name)
    }
}

struct ChildView: View {
    @ObservedObject var viewModel: UserViewModel  // 从父组件传入
    var body: some View { ... }
}

5.3.4 @Observable（iOS 17+）

新宏 @Observable 可替代 ObservableObject，更简洁：

1
2
3
4
5
6
7
8
9
10
11
12

@Observable
class User {
    var name: String = ""
    var age: Int = 0
}

struct UserView: View {
    @State private var user = User()
    var body: some View {
        Text(user.name)  // 自动追踪依赖
    }
}

六、Android 原生：RxJava、Agera、Jetpack Compose

6.1 RxJava 响应式状态

1
2
3
4
5
6
7
8
9

val querySubject = PublishSubject.create<String>()
val results = querySubject
    .debounce(300, TimeUnit.MILLISECONDS)
    .filter { it.length >= 2 }
    .switchMap { api.search(it).toObservable() }
    .observeOn(AndroidSchedulers.mainThread())

results.subscribe { updateUI(it) }.addTo(compositeDisposable)
querySubject.onNext(editText.text.toString())

StateFlow / SharedFlow（Kotlin Flow）是官方推荐替代 LiveData 的方案：

1
2
3
4
5
6
7
8
9
10

class ViewModel : ViewModel() {
    private val _uiState = MutableStateFlow<UiState>(UiState.Loading)
    val uiState: StateFlow<UiState> = _uiState.asStateFlow()

    fun loadData() {
        viewModelScope.launch {
            _uiState.value = UiState.Success(repository.fetch())
        }
    }
}

6.2 Agera 简介（已归档）

Agera 是 Google 早期的轻量级响应式库，采用推事件、拉数据模型：

• Observable：广播事件
• Updatable：监听事件，从 Repository 拉取数据

1
2
3
4
5
6
7
8
9

// 概念示例（Agera 已归档，仅作了解）
val repository = Repositories.repositoryWithInitialValue(initialData)
    .observe()
    .onUpdatesPerLoop()
    .getFrom { fetchFromNetwork() }
    .compile()

repository.addUpdatable(updatable)
// 事件触发时，Updatable 从 Repository 拉取最新数据

注意：Agera 已于 2023 年 3 月归档，新项目建议使用 Kotlin Flow / StateFlow。

6.3 Jetpack Compose 状态管理

6.3.1 remember + mutableStateOf

1
2
3
4
5
6
7

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}

• remember：在重组间保持值，避免每次重组重新创建
• mutableStateOf：创建可观察状态，读该状态的 Composable 会在值变化时重组

6.3.2 状态提升（State Hoisting）

1
2
3
4
5
6
7
8
9
10
11
12

@Composable
fun Parent() {
    var count by remember { mutableStateOf(0) }
    Child(count = count, onCountChange = { count = it })
}

@Composable
fun Child(count: Int, onCountChange: (Int) -> Unit) {
    Button(onClick = { onCountChange(count + 1) }) {
        Text("$count")
    }
}

6.3.3 ViewModel + StateFlow

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class MyViewModel : ViewModel() {
    private val _state = MutableStateFlow(MyState())
    val state: StateFlow<MyState> = _state.asStateFlow()

    fun update() {
        _state.update { it.copy(...) }
    }
}

@Composable
fun Screen(viewModel: MyViewModel = viewModel()) {
    val state by viewModel.state.collectAsStateWithLifecycle()
    // 使用 state
}

6.3.4 配置变更保留：rememberSaveable

1
2

var count by rememberSaveable { mutableStateOf(0) }
// 屏幕旋转等配置变更后，count 会保留

七、鸿蒙：ArkTS

7.1 装饰器驱动的状态

ArkTS 通过装饰器声明「可观察」状态，状态变化自动触发 UI 更新。

7.1.1 @State：组件内部状态

1
2
3
4
5
6
7
8
9
10
11
12

@Entry
@Component
struct Counter {
  @State count: number = 0
  build() {
    Column() {
      Text(`Count: ${this.count}`)
      Button('+1')
        .onClick(() => { this.count++ })
    }
  }
}

7.1.2 @Prop：父 → 子单向

1
2
3
4
5
6
7
8
9
10

@Component
struct Child {
  @Prop value: number  // 父组件传入，子组件只读
  build() {
    Text(`${this.value}`)
  }
}

// 父组件
Child({ value: this.count })

7.1.3 @Link：父子双向

1
2
3
4
5
6
7
8
9
10

@Component
struct Child {
  @Link value: number  // 子组件修改会同步回父组件
  build() {
    Button('+1').onClick(() => { this.value++ })
  }
}

// 父组件
Child({ value: $count })  // $ 语法传递引用

7.1.4 @Provide / @Consume：跨层级

1
2
3
4
5

// 祖先
@Provide('theme') theme: string = 'light'

// 任意后代
@Consume('theme') theme: string

7.1.5 @Observed + @ObjectLink：嵌套对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@Observed
class User {
  name: string
  constructor(name: string) { this.name = name }
}

@Component
struct UserView {
  @ObjectLink user: User
  build() {
    Text(this.user.name)
      .onClick(() => { this.user.name = 'New' })  // 触发更新
  }
}

7.2 状态管理 V2（@ObservedV2 + @Trace）

V2 支持深层属性观察，解决嵌套对象内部属性不可观察的问题。

八、跨平台对比与选型

8.1 概念映射表

8.2 选型建议

九、源码原理浅析

9.1 React：Fiber 与 Hooks 链表

React 在 Fiber 节点上维护 memoizedState 链表，每个 Hook 对应链表中的一个节点：

1
2
3
4
5

Fiber.memoizedState → useState → useEffect → useContext → ...
                          │
                          ├─ baseState
                          ├─ baseQueue
                          └─ next (下一个 Hook)

setState 会将更新放入队列，调度器在合适时机执行重渲染，按顺序应用更新，保证 Hooks 调用顺序稳定。

9.2 Jetpack Compose：快照与重组

Compose 使用 Snapshot 系统追踪状态读取：

1. mutableStateOf 创建 SnapshotMutableState
2. 读取 state.value 时，当前 Composable 的「重组作用域」会记录对该 state 的依赖
3. 写入 state.value = x 时，Compose 标记依赖该 state 的作用域需要重组
4. 重组时重新执行对应 Composable，得到新 UI

1

读取 state → 记录依赖 → 写入 state → 标记无效 → 调度重组 → 重新执行 Composable

9.3 SwiftUI：@State 与依赖追踪

SwiftUI 在编译期和运行期结合，追踪 body 中对 @State 等属性的访问。当 @State 变化时，视图的 body 会重新求值，生成新的 View 描述，再与旧描述 diff 后更新真实视图。

9.4 ArkTS：装饰器与更新调度

@State 等装饰器在编译期生成观察逻辑，运行时状态变化会标记组件为脏，下一帧统一执行 build 更新 UI，类似 Flutter 的 setState + 帧调度。

十、实战案例

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

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

React：

1
2
3
4

const [user, setUser] = useState('');
const [pwd, setPwd] = useState('');
const canLogin = user.length >= 3 && pwd.length >= 6;
return <Button disabled={!canLogin}>登录</Button>;

SwiftUI：

1
2
3
4

@State private var user = ""
@State private var pwd = ""
var canLogin: Bool { user.count >= 3 && pwd.count >= 6 }
Button("登录") { }.disabled(!canLogin)

Jetpack Compose：

1
2
3
4

var user by remember { mutableStateOf("") }
var pwd by remember { mutableStateOf("") }
val canLogin = user.length >= 3 && pwd.length >= 6
Button(onClick = {}, enabled = canLogin) { Text("登录") }

ArkTS：

1
2
3
4
5
6

@State user: string = ''
@State pwd: string = ''
private get canLogin(): boolean {
  return this.user.length >= 3 && this.pwd.length >= 6
}
Button('登录').enabled(this.canLogin)

10.2 搜索防抖 + 取消旧请求

React：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const [keyword, setKeyword] = useState('');
const [results, setResults] = useState([]);

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

RxSwift：

1
2
3
4
5
6
7

searchTextField.rx.text.orEmpty
    .filter { $0.count >= 2 }
    .debounce(.milliseconds(300), scheduler: MainScheduler.instance)
    .flatMapLatest { api.search($0) }
    .observe(on: MainScheduler.instance)
    .bind(to: resultsRelay)
    .disposed(by: disposeBag)

Jetpack Compose + ViewModel：

1
2
3
4
5
6

val query = MutableStateFlow("")
val results = query
    .debounce(300)
    .filter { it.length >= 2 }
    .flatMapLatest { repository.search(it) }
    .stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), emptyList())

10.3 购物车总价实时计算

Flutter (Provider)：

1
2
3
4
5

class CartModel extends ChangeNotifier {
  final List<CartItem> _items = [];
  double get total => _items.fold(0, (sum, item) => sum + item.price * item.qty);
  void add(CartItem item) { _items.add(item); notifyListeners(); }
}

React：

1
2
3
4
5

const [items, setItems] = useState([]);
const total = useMemo(
  () => items.reduce((s, i) => s + i.price * i.qty, 0),
  [items]
);

10.4 Next.js 服务端数据 + 客户端状态

1
2
3
4
5
6
7
8
9
10

// app/product/[id]/page.tsx
export default async function Page({ params }: { params: { id: string } }) {
  const product = await fetchProduct(params.id);  // 服务端拉取
  return (
    <div>
      <ProductInfo product={product} />
      <AddToCartButton productId={product.id} />  {/* 内部用 useState 管理数量 */}
    </div>
  );
}

十一、总结与最佳实践

11.1 核心要点

11.2 最佳实践

1. 最小化状态：能推导的不要存储，用 useMemo / computed / getter
2. 状态提升：当多组件需要共享时，提升到共同祖先
3. 不可变更新：避免直接修改，使用 setState/copy/扩展运算符
4. 副作用清理：useEffect 清理、Disposable.dispose、viewModelScope
5. 服务端状态分离：与 UI 状态区分，用专门库（React Query 等）管理
6. 类型安全：TypeScript、Swift、Kotlin 充分利用类型约束状态结构

11.3 各平台快速对照

参考资源

• React 官方文档 - 状态管理
• Next.js - Server and Client Components
• Flutter 状态管理
• SwiftUI 数据流
• Jetpack Compose 状态
• 鸿蒙 ArkUI 状态管理
• RxSwift
• RxJava
• Agera (Archived)

目录

• 一、响应式编程基础
• 二、iOS响应式状态管理
• 三、Flutter响应式状态管理
• 四、React响应式状态管理
• 五、React Native响应式状态管理
• 六、鸿蒙响应式状态管理
• 七、性能优化与对比
• 八、最佳实践与架构选型

一、响应式编程基础

1.1 核心概念

响应式编程是一种编程范式，其核心思想是：

• 数据驱动UI：UI是数据的函数 UI = f(state)
• 自动更新：当数据变化时，UI自动更新
• 声明式：只关注”是什么”，不关注”怎么做”

状态管理是响应式编程的核心，解决的问题包括：

• 状态的存储和访问
• 状态变化的检测和通知
• 副作用的处理
• 状态的持久化

1.2 响应式系统的基本构成

一个完整的响应式系统通常包含以下组件：

二、iOS响应式状态管理

2.1 传统KVO机制

核心原理：

• 键值观察（Key-Value Observing）是iOS的原生响应式机制
• 基于运行时的动态方法替换
• 使用isa-swizzling技术实现属性观察

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 1. 注册观察者
[object addObserver:self 
         forKeyPath:@"propertyName" 
            options:NSKeyValueObservingOptionNew 
            context:NULL];

// 2. 实现观察回调
- (void)observeValueForKeyPath:(NSString *)keyPath 
                      ofObject:(id)object 
                        change:(NSDictionary *)change 
                       context:(void *)context {
    if ([keyPath isEqualToString:@"propertyName"]) {
        id newValue = change[NSKeyValueChangeNewKey];
        // 更新UI
    }
}

// 3. 移除观察者
- (void)dealloc {
    [object removeObserver:self forKeyPath:@"propertyName"];
}

技术深度：

• KVO通过动态创建子类实现，当对象被观察时，系统会：
  1. 创建一个继承自原类的子类
  2. 重写被观察属性的setter方法
  3. 替换对象的isa指针指向新子类
  4. 在setter中通知观察者

2.2 Combine框架

核心原理：

• Apple在iOS 13+推出的响应式编程框架
• 基于Publisher-Subscriber模式
• 支持函数式的响应式操作

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 1. 创建Publisher
let subject = PassthroughSubject<String, Never>()

// 2. 订阅
let cancellable = subject
    .map { $0.uppercased() }
    .filter { $0.count > 3 }
    .sink {
        print("Received: \($0)")
    }

// 3. 发送值
subject.send("Hello")
subject.send("World")

// 4. 取消订阅
cancellable.cancel()

技术深度：

• Combine使用协议和泛型实现类型安全
• Publisher：数据源，负责发送值
• Subscriber：订阅者，接收并处理值
• Operator：操作符，对数据流进行转换
• Cancellable：管理订阅生命周期

2.3 SwiftUI状态管理

核心原理：

• 声明式UI框架，与响应式状态管理深度集成
• 使用属性包装器简化状态管理
• 基于依赖追踪的更新机制

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// 1. @State - 本地状态
struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
            }
        }
    }
}

// 2. @ObservableObject - 可观察对象
class UserViewModel: ObservableObject {
    @Published var name: String
    
    init(name: String) {
        self.name = name
    }
}

struct UserView: View {
    @ObservedObject var viewModel: UserViewModel
    
    var body: some View {
        Text("Name: \(viewModel.name)")
    }
}

技术深度：

• @State：使用值类型的引用包装，支持本地状态
• @Published：使用属性包装器实现自动通知
• @ObservedObject：使用弱引用避免循环引用
• @EnvironmentObject：通过环境传递共享状态

三、Flutter响应式状态管理

3.1 基础状态管理（setState）

核心原理：

• 基于StatefulWidget和setState的基础状态管理
• 脏检查机制触发重建
• Element树的差异化更新

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;
  
  void _increment() {
    setState(() {
      _count++;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

技术深度：

• setState：标记Element为dirty，触发下一帧重建
• Widget树：不可变的配置树
• Element树：管理生命周期和状态
• RenderObject树：负责布局和渲染

3.2 InheritedWidget机制

核心原理：

• 基于继承的状态传递机制
• 利用Element树的层级关系
• 实现跨组件的状态共享

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

class AppState extends InheritedWidget {
  final int count;
  final VoidCallback increment;
  
  const AppState({
    Key? key,
    required this.count,
    required this.increment,
    required Widget child,
  }) : super(key: key, child: child);
  
  static AppState of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<AppState>()!;
  }
  
  @override
  bool updateShouldNotify(AppState oldWidget) {
    return oldWidget.count != count;
  }
}

// 使用
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _count = 0;
  
  void _increment() {
    setState(() => _count++);
  }
  
  @override
  Widget build(BuildContext context) {
    return AppState(
      count: _count,
      increment: _increment,
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = AppState.of(context);
    return Column(
      children: [
        Text('Count: ${appState.count}'),
        ElevatedButton(
          onPressed: appState.increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

技术深度：

• dependOnInheritedWidgetOfExactType：建立依赖关系
• updateShouldNotify：决定是否通知子组件
• Element依赖追踪：当InheritedWidget变化时，自动重建依赖的子组件

3.3 第三方状态管理库

Provider

核心原理：

• 基于InheritedWidget的轻量级状态管理
• 使用ChangeNotifier实现状态通知
• 支持依赖注入和状态监听

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// 1. 定义模型
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

// 2. 提供状态
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}

// 3. 消费状态
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CounterModel>(
      builder: (context, counter, child) {
        return Column(
          children: [
            Text('Count: ${counter.count}'),
            ElevatedButton(
              onPressed: counter.increment,
              child: Text('Increment'),
            ),
          ],
        );
      },
    );
  }
}

技术深度：

• ChangeNotifier：实现观察者模式
• Consumer：订阅状态变化，只重建必要的Widget
• Selector：更精确的依赖选择，避免不必要的重建

Riverpod

核心原理：

• 解决Provider的依赖注入和测试问题
• 基于ProviderContainer的状态管理
• 支持编译时安全和懒加载

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 1. 定义Provider
final counterProvider = StateProvider<int>((ref) => 0);

// 2. 使用Provider
class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => ref.read(counterProvider.notifier).state++,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

// 3. 组合Provider
final userProvider = Provider<User>((ref) {
  final userId = ref.watch(userIdProvider);
  return User(id: userId);
});

技术深度：

• ProviderScope：状态容器，支持测试和隔离
• AutoDispose：自动清理不再使用的状态
• Family：参数化Provider，支持动态创建
• FutureProvider：处理异步状态
• StreamProvider：处理流式状态

四、React响应式状态管理

4.1 基础状态管理（setState）

核心原理：

• 基于Component和setState的状态管理
• 虚拟DOM的差异化更新
• 批处理优化性能

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  increment() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

技术深度：

• setState：异步更新，支持函数式更新
• shouldComponentUpdate：手动优化渲染
• PureComponent：浅比较优化
• forceUpdate：强制更新

4.2 Hooks状态管理

核心原理：

• React 16.8+引入的函数组件状态管理
• 基于闭包和链表的Hook实现
• 支持自定义Hook复用逻辑

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

技术深度：

• useState：基于Dispatcher的状态管理
• useEffect：处理副作用，依赖数组控制执行时机
• useContext：跨组件状态共享
• useReducer：复杂状态逻辑管理
• useMemo/useCallback：性能优化

4.3 Redux状态管理

核心原理：

• 基于Flux架构的状态管理
• 单一数据源和不可变状态
• Reducer纯函数处理状态更新

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// 1. 定义Action
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 2. 定义Reducer
function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// 3. 创建Store
const store = createStore(counterReducer);

// 4. 订阅状态
store.subscribe(() => {
  console.log('Current state:', store.getState());
});

// 5. 分发Action
store.dispatch({ type: INCREMENT });

// 6. 在React中使用
import { connect } from 'react-redux';

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: INCREMENT }),
  decrement: () => dispatch({ type: DECREMENT })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

技术深度：

• Store：单一数据源，持有应用状态
• Action：描述状态变化的对象
• Reducer：纯函数，根据Action计算新状态
• Middleware：处理异步Action和副作用
• CombineReducers：拆分状态逻辑

五、React Native响应式状态管理

5.1 原生状态管理

核心原理：

• 与React相同的状态管理机制
• 针对移动平台的优化
• 支持原生模块的状态同步

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Count: {count}</Text>
      <TouchableOpacity
        style={{ marginTop: 20, padding: 10, backgroundColor: '#007AFF' }}
        onPress={() => setCount(count + 1)}
      >
        <Text style={{ color: 'white' }}>Increment</Text>
      </TouchableOpacity>
    </View>
  );
}

技术深度：

• Bridge：JavaScript与原生通信
• Shadow Tree：虚拟DOM在RN中的实现
• Batched Updates：批量更新优化
• Native Modules：原生功能集成

5.2 第三方状态管理库

Redux

核心原理：

• 与React Redux相同的架构
• 针对移动场景的优化
• 支持持久化和中间件

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 与Web React Redux相同
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

// 在App中使用
import { Provider } from 'react-redux';

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

MobX

核心原理：

• 基于观察者模式的状态管理
• 响应式代理自动追踪依赖
• 装饰器简化状态定义

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

// 定义Store
class CounterStore {
  @observable count = 0;
  
  @action increment() {
    this.count++;
  }
  
  @action decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();

// 使用Store
@observer
class Counter extends React.Component {
  render() {
    return (
      <View>
        <Text>Count: {counterStore.count}</Text>
        <TouchableOpacity onPress={() => counterStore.increment()}>
          <Text>Increment</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

技术深度：

• observable：创建响应式状态
• action：修改状态的方法
• computed：派生状态
• reaction：副作用处理

Context API

核心原理：

• React 16.3+的Context API
• 简化跨组件状态共享
• 替代Redux的轻量级方案

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import React, { createContext, useContext, useState } from 'react';

// 创建Context
const CounterContext = createContext();

// 提供Context
function CounterProvider({ children }) {
  const [count, setCount] = useState(0);
  
  const value = {
    count,
    increment: () => setCount(count + 1),
    decrement: () => setCount(count - 1)
  };
  
  return (
    <CounterContext.Provider value={value}>
      {children}
    </CounterContext.Provider>
  );
}

// 使用Context
function Counter() {
  const { count, increment, decrement } = useContext(CounterContext);
  
  return (
    <View>
      <Text>Count: {count}</Text>
      <TouchableOpacity onPress={increment}>
        <Text>Increment</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={decrement}>
        <Text>Decrement</Text>
      </TouchableOpacity>
    </View>
  );
}

// 在App中使用
function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

六、鸿蒙响应式状态管理

6.1 ArkUI状态管理

核心原理：

• 鸿蒙ArkUI框架的响应式状态管理
• 基于数据驱动的UI更新
• 支持声明式和命令式编程

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// 1. 基本状态管理
@Entry
@Component
struct Counter {
  @State count: number = 0;
  
  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(24)
      Button('Increment')
        .onClick(() => {
          this.count++;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

// 2. 全局状态管理
@StorageLink('count')
let globalCount: number = 0;

@Entry
@Component
struct GlobalCounter {
  build() {
    Column() {
      Text(`Global Count: ${globalCount}`)
        .fontSize(24)
      Button('Increment')
        .onClick(() => {
          globalCount++;
        })
    }
  }
}

技术深度：

• @State：组件级状态，局部更新
• @Prop：父组件传递的状态，单向数据流
• @Link：双向绑定状态
• @StorageLink：全局存储状态
• @Provide/@Consume：跨组件状态共享

6.2 状态管理最佳实践

核心原理：

• 结合MVVM架构
• 使用状态管理器统一管理状态
• 支持异步操作和副作用处理

实现机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

// 定义状态管理器
class CounterStore {
  private _count: number = 0;
  private _observers: Set<() => void> = new Set();
  
  get count(): number {
    return this._count;
  }
  
  increment(): void {
    this._count++;
    this.notifyObservers();
  }
  
  decrement(): void {
    this._count--;
    this.notifyObservers();
  }
  
  subscribe(observer: () => void): void {
    this._observers.add(observer);
  }
  
  unsubscribe(observer: () => void): void {
    this._observers.delete(observer);
  }
  
  private notifyObservers(): void {
    this._observers.forEach(observer => observer());
  }
}

// 使用状态管理器
const counterStore = new CounterStore();

@Entry
@Component
struct Counter {
  @State count: number = counterStore.count;
  
  aboutToAppear(): void {
    counterStore.subscribe(() => {
      this.count = counterStore.count;
    });
  }
  
  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(24)
      Button('Increment')
        .onClick(() => {
          counterStore.increment();
        })
    }
  }
}

技术深度：

• 单向数据流：状态变化 → UI更新
• 可观测性：状态变化自动通知
• 模块化：状态逻辑与UI分离
• 可测试性：纯函数状态更新

七、性能优化与对比

7.1 性能优化策略

7.2 平台对比

7.3 性能瓶颈分析

iOS：

• KVO的运行时开销
• Combine的内存管理
• SwiftUI的重建机制

Flutter：

• Widget重建开销
• 状态管理的性能开销
• 渲染管线的优化

React：

• 虚拟DOM的diff开销
• 重渲染的性能损耗
• 状态管理的复杂性

React Native：

• JSBridge的通信开销
• 原生模块的调用延迟
• 渲染性能的限制

鸿蒙：

• 状态管理的同步问题
• 组件生命周期的管理
• 性能优化的复杂度

八、最佳实践与架构选型

8.1 架构选型指南

8.2 最佳实践

1. 状态管理分层

1
2
3
4
5
6
7
8
9
10
11
12
13
14

应用架构
┌─────────────────────────┐
│  UI Layer              │
│  (View/Widget/Component) │
├─────────────────────────┤
│  State Management Layer │
│  (Store/Provider/Context) │
├─────────────────────────┤
│  Business Logic Layer   │
│  (UseCase/Service)      │
├─────────────────────────┤
│  Data Layer            │
│  (Repository/API)      │
└─────────────────────────┘

2. 状态管理原则

• 单一数据源：避免状态分散
• 不可变状态：确保状态变化可预测
• 单向数据流：状态 → UI → 事件 → 状态
• 分离关注点：业务逻辑与UI分离
• 可测试性：状态管理逻辑可独立测试

3. 性能优化最佳实践

• iOS：使用Combine的调度器，避免KVO滥用
• Flutter：使用const Widget，合理使用Key，优化重建
• React：使用memo，合理设置依赖数组，避免不必要的渲染
• React Native：使用Hermes引擎，优化桥接通信
• 鸿蒙：合理使用状态注解，优化组件渲染

4. 团队协作建议

• 统一状态管理方案：团队内使用一致的状态管理库
• 文档化状态结构：清晰记录状态的结构和流转
• 代码规范：建立状态管理的代码规范
• 测试策略：为状态管理逻辑编写单元测试
• 性能监控：建立性能监控机制

总结

响应式状态管理是现代前端和移动开发的核心技术之一，不同平台有其独特的实现原理和最佳实践：

1. iOS：从KVO到Combine再到SwiftUI，逐步演进为更现代的响应式方案
2. Flutter：基于Widget树和InheritedWidget，构建了独特的响应式体系
3. React：从setState到Hooks，简化了状态管理的复杂性
4. React Native：继承了React的状态管理机制，针对移动平台进行了优化
5. 鸿蒙：基于ArkUI框架，提供了声明式的状态管理方案

选择合适的状态管理方案需要考虑：

• 应用规模：小型应用使用简单方案，大型应用使用复杂方案
• 性能要求：对性能敏感的应用需要更精细的状态管理
• 团队经验：选择团队熟悉的技术栈
• 维护成本：考虑长期维护的复杂性

通过深入理解各平台的响应式状态管理原理，开发者可以构建更高效、更可维护的应用，提升用户体验和开发效率。

本文从工程选型出发，对比 Flutter 生态中常用的状态管理方案，并给出实现思路与源码阅读入口，便于结合官方仓库深入学习。

目录

• 一、如何理解「状态管理」在 Flutter 中的位置
• 二、设计思想与经典模式
• 三、内置与轻量方案
• 四、Provider
• 五、Riverpod
• 六、Bloc / Cubit（flutter_bloc）
• 七、GetX（简述）
• 八、横向对比与适用场景
• 九、实现原理归纳
• 十、源码导读：从哪几个文件读起

一、如何理解「状态管理」在 Flutter 中的位置

Flutter 的 UI 由 **Widget 配置树** 描述；真正随数据变化而刷新的，依赖 **Element / RenderObject** 的更新机制。状态管理解决的是：把业务数据放在哪、如何通知依赖它的 Widget 重建、如何组织可测试的业务逻辑。

选型时通常看：学习曲线、样板代码量、与测试/依赖注入的契合度、团队习惯、是否强约束数据流。

二、设计思想与经典模式

状态管理库里的常见做法，多半能在经典设计思想里找到落点：谁在存状态、谁订阅变化、谁负责把变化交给 UI。下面是与本文各方案最相关的几种；它们在实际工程里往往组合出现，而不是非此即彼。

2.1 观察者模式（Observer）

含义：被观察对象（Subject）在状态变化时通知一组观察者（Observer），由观察者决定如何更新。
在 Flutter 里：Listenable / ChangeNotifier 是典型的「可订阅 + 广播通知」；ValueNotifier 是带当前值的特化。notifyListeners() 对应 Subject 发通知，ValueListenableBuilder / AnimatedBuilder 等对应 Observer 侧的重建入口。
与各方案：Provider + ChangeNotifier、以及 UI 侧订阅 Stream<State> 的 BlocBuilder，都体现观察者思想；Bloc 一侧更强调 随时间展开的异步事件流。

2.2 发布—订阅（Pub/Sub）与响应式流

与观察者同属「一对多通知」，但常强调 发送方与订阅方解耦、中间可有 异步缓冲。Stream / StreamController、Bloc 的 Stream<State>、Riverpod 的 ref.listen（副作用订阅）都可归入这一族：状态或事件沿时间轴推送给订阅者，便于表达多步异步与管线化逻辑（Bloc 尤为典型）。

2.3 依赖注入（DI）与服务定位器（Service Locator）

含义：由外部组装依赖，调用方依赖抽象而非在内部直接 new 具体实现，便于替换与测试。
在 Flutter 里：InheritedWidget、Provider、Riverpod 的 ProviderScope + ref.read，以及 GetX 的 Get.put / Get.find，都在做「把实现挂到某处，子树或全局按类型 / key 取用」。差异主要在生命周期（是否与 Element 树绑定、是否全局单例）以及 Riverpod 带来的 编译期与依赖图层面的安全。

2.4 命令模式（Command）与显式状态（Bloc）

Bloc 中的 **Event 可视为命令对象**：UI 不直接改领域状态，而是派发事件，由 Bloc 统一解释并 emit 新 State。再配合不可变、可穷举的 State 类型描述界面阶段，相当于把业务规则收拢到「命令处理 + 状态迁移」，利于单测与行为审计。Cubit 则是用 方法调用 代替显式 Event 类型，思想仍相近。

2.5 外观（Facade）、组合根与依赖倒置

InheritedWidget 手写成本高，Provider 等库在其上提供更易用的 Facade 式 API；Riverpod 用 ProviderContainer 把依赖图从整棵 BuildContext 树里抽出一层，更接近在应用入口做 组合根（Composition Root） 集中装配。分层架构里常配合 依赖倒置：领域层定义接口，具体实现由外层注入——与上述 DI 能力天然契合。

2.6 各方案与上述思想的对应（速查）

理清这些对应关系，再读各库的 watch、listen、read、emit 等 API，会少很多「名不同、实相近」的困惑。

三、内置与轻量方案

3.1 setState

• 优点：零依赖，心智负担小，适合局部、短命状态。
• 缺点：逻辑与 UI 耦在 State 里，规模一大难以拆分与单测。
• 适用：页面内表单开关、动画控制器等。
• 原理：setState 标记 Element dirty，在下一帧 build 中重建子树。

3.2 ValueNotifier + ValueListenableBuilder

• 优点：对象级可监听，比 setState 更易抽到类字段中。
• 缺点：跨页面传递需手动层层传参或自己封装 InheritedWidget。
• 适用：单页面内一块 UI 依赖单个标量/小对象。
• 原理：Listenable 通知监听者；ValueListenableBuilder 在 build 中注册监听并重建。

四、Provider

定位：在 InheritedWidget 之上封装「依赖查找 + 更新传播」，常与 **ChangeNotifier** 搭配。

五、Riverpod

定位：Provider 作者推出的「下一代」，编译期安全 + 全局注册表，弱化对 BuildContext 的依赖（ref 为主）。

六、Bloc / Cubit（flutter_bloc）

定位：事件驱动 + 显式状态转移；Cubit 是 Bloc 的简化（方法调用代替 Event 类型）。

七、GetX（简述）

八、横向对比与适用场景

场景建议（概括）：

• 页面内小状态：setState / ValueNotifier。
• 多页面共享、中等规模：Provider 或 Riverpod（更看团队是否愿意引入 Riverpod 心智模型）。
• 强流程、多事件、要画清状态机：Bloc/Cubit。
• 极快交付且团队接受其风格：可考察 GetX，并做好规范与评审。

九、实现原理归纳

1. 依赖向下、通知向上：InheritedWidget / Provider / Riverpod 本质是「子树查找 + 依赖追踪」。
2. Listenable / Stream：ChangeNotifier 与 Bloc 分别代表 拉模型监听 与 推模型流 两类更新机制。
3. 刷新粒度：从「整页 setState」到「Selector/select 只重建一部分」，是性能与 API 设计的共同主题。
4. Riverpod：把「谁依赖谁」放在 容器里统一管理，而不是仅靠 BuildContext 树，这是和经典 Provider 的重要区别。
5. 与经典模式的对照：观察者、Listenable / Stream 两类通知、依赖注入与组合根等，在 第二节 已从「设计思想」角度归纳，可与上四条穿插阅读。

十、源码导读：从哪几个文件读起

下面列出 Pub 上包名 与建议阅读顺序（以 GitHub 托管为准，分支以主分支为例）。阅读时结合你项目里 pubspec.yaml 锁定的版本更佳。

10.1 provider

• 仓库：flutter/packages 中的 **provider** 包（或社区维护的 provider 独立仓库，以 pub.dev 主页为准）。
• 入口：lib/src/provider.dart、inherited_provider.dart — 看 InheritedWidget 如何包装 value / delegate。
• ChangeNotifier 集成：change_notifier_provider.dart — Listenable 与 Element 更新如何衔接。

10.2 flutter_riverpod / riverpod

• 仓库：**rrousselGit/riverpod**。
• 核心：lib/src/framework/container.dart（ProviderContainer）、provider/base.dart 一带 — 理解 Provider 状态存哪、如何失效。
• 注解与生成：若用代码生成，配合阅读 **riverpod_generator** 生成的 *.g.dart 与 riverpod_annotation。

10.3 bloc / flutter_bloc

• 仓库：**felangel/bloc**。
• **bloc 包**：lib/src/bloc.dart — Bloc 基类、on<Event>、emit 与 Stream 管道。
• **flutter_bloc 包**：bloc_builder.dart、bloc_listener.dart — 如何把 Stream 接到 Widget 树。

10.4 Flutter 框架层（通用基础）

• flutter/packages/flutter/lib/src/widgets/framework.dart — **Element、InheritedElement** 更新机制。
• inherited_model.dart、notification_listener.dart — 与自定义状态传播相关时可查。

10.5 阅读方法建议

1. 先在你自己的 Demo 里 打一个断点，从 Consumer / ref.watch / BlocBuilder 的 build 跟进去。
2. 对照本文「原理要点」只读一条主路径，不要一上来通读全仓库。
3. 版本以 **pubspec.lock** 为准，避免文档与旧版 API 不一致。

小结

没有「唯一正确」的库：小项目用内置 + Provider 往往足够；大项目更常见 Riverpod 或 Bloc 与清晰分层结合。先扫一眼 第二节 里的观察者、Pub/Sub、DI、命令等表述，再对照 InheritedWidget、Listenable、Stream 三条技术线，读各库 API 与源码会省力很多。若你后续锁定某一库做深度拆解，可以在此基础上单独成文（例如只讲 Bloc 的并发与 emit 规则）。

由浅入深，从基本概念到原理与源码，再到示例与实际项目应用案例，系统梳理两大主流框架中的状态管理方案

一、状态管理基础概念

1.1 什么是状态（State）？

状态是驱动 UI 变化的数据。当状态改变时，界面随之更新，形成「数据驱动视图」的声明式模式。

1
2
3
4

状态 ──► 视图
 ▲         │
 │         ▼
 └── 用户交互 / 网络请求 / 定时器等

1.2 状态的分类

1.3 为什么需要状态管理？

随着应用复杂度上升，会出现：

• 状态提升导致 props 层层传递（prop drilling）
• 状态分散导致难以追踪和调试
• 重复请求、缓存失效等数据一致性问题

状态管理方案的目标：集中、可预测、易维护。

二、React 状态管理

2.1 内置方案概览

2.2 useState：最简单的本地状态

1
2
3
4
5
6
7
8
9
10
11
12

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      {/* 函数式更新，避免闭包陷阱 */}
      <button onClick={() => setCount(prev => prev + 1)}>+1 (安全)</button>
    </div>
  );
}

惰性初始化：初始值可以是函数，仅在首次渲染执行。

1

const [state, setState] = useState(() => expensiveComputation());

2.3 useReducer：复杂状态的 reducer 模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

2.4 Context API：跨层级共享状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15