为了弄懂Flutter的状态管理, 我用10种方法改造了counter app

本文通过改造flutter的counter app, 展示不同的状态管理方法的用法.

可以直接去demo地址看代码:
https://github.com/mengdd/counter_state_management
切换分支对应不同的实现方式.

Contents

  • Flutter中的状态管理
    • 状态分类
    • 状态管理方法概述
  • Counter sample默认实现: StatefulWidget
  • InheritedWidget
  • Scoped Model
  • Provider
  • BLoC
    • BLoC手动实现
    • BLoC + InheritedWidget做传递
    • BLoC rxdart实现
    • BLoC用库实现
  • rxdart
  • Redux
  • MobX
  • Flutter Hooks
  • Demo说明及感想

Flutter State Management

Flutter是描述性的(declarative), UI反映状态.

UI = f(state)

其中f代表了build方法.

状态的改变会直接触发UI的重新绘制.

UI reacts to the changes.

相对的, Android, iOS等都是命令式的(imperative), 会有setText()之类的方法来改变UI.

状态分类

状态分两种:

  • Ephemeral state: 有时也叫UI state或local state. 这种可以包含在单个widget里.
    比如: PageView的当前页, 动画的当前进度, BottomNavigationBar的当前选中tab.
    这种状态不需要使用复杂的状态管理手段, 只要用一个StatefulWidget就可以了.
  • App state: 需要在很多地方共享的状态, 也叫shared state或global state.
    比如: 用户设置, 登录信息, 通知, 购物车, 新闻app中的已读/未读状态等.

这种状态分类其实没有一个清晰的界限.
在简单的app里, 可以用setState()来管理所有的状态; 在app需要的时候, tab的index也可能被抽取到外部作为一个需要保存和管理的app state.

状态管理方法

官方提供了一些options: Flutter官方文档 options
目前官方比较推荐的是provider.

各种状态管理方法要解决的几个问题:

  • 状态保存哪里?
  • 状态如何获取?
  • UI如何更新?
  • 如何改变状态?

Counter Sample默认实现: StatefulWidget

新建Flutter app, 是一个counter app, 自动使用了StatefulWidget来管理状态.
对这个简单的app来说, 这是很合理的.

我们对这个app进行一个简单的改造, 再增加一个button用来减数字.
同样的方式, 只需要添加一个方法来做减法就可以了.

这种方法的一个变体是, 用StatefulBuilder, 主要好处是少写一些代码.

StatefulWidget对简单的Widget内部状态来说是合理的.

对于复杂的状态, 这种方式的缺点:

  • 状态属性多了以后, 可能有很多地方都在调用setState().
  • 不能把状态和UI分开管理.
  • 不利于跨组件/跨页面的状态共享. (如何调用另一个Widget的setState()? 把方法通过构造传递过来? No, don't do this!)

千万不要用全局变量法来解决问题.

如果企图用这种方式来管理跨组件的状态, 就难免会用这些Anti patterns:

  • 紧耦合. Strongly coupling widgets.
  • 全局保存的state. Globally tracking state.
  • 从外部调用setState方法. Calling setState from outside.

所以这种方法只适用于local state的管理.

InheritedWidget

InheritedWidget的主要作用是在Widget树中有效地传递信息.

如果没有InheritedWidget, 我们想把一个数据从widget树的上层传到某一个child widget, 要利用途中的每一个构造函数, 一路传递下来.

Flutter中常用的Theme, Style, MediaQuery等就是inherited widget, 所以在程序里的各种地方都可以访问到它们.

InheritedWidget也会用在其他状态管理模式中, 作为传递数据的方法.

InheritedWidget状态管理实现

当用InheritedWidget做状态管理时, 基本思想就是把状态提上去.
当子widgets之间需要共享状态, 那么就把状态保存在它们共有的parent中.

首先定义一个InheritedWidget的子类, 包含状态数据.
覆写两个方法:

  • 提供一个静态方法给child用于获取自己. (命名惯例of(BuildContext)).
  • 判断是否发生了数据更新.
class CounterStateContainer extends InheritedWidget {
  final CounterModel data;

  CounterStateContainer({
    Key key,
    @required Widget child,
    @required this.data,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(CounterStateContainer oldWidget) {
    return data.counter.value != oldWidget.data.counter.value;
  }

  static CounterModel of(BuildContext context) {
    return context
        .dependOnInheritedWidgetOfExactType<CounterStateContainer>()
        .data;
  }
}

之后用这个CounterStateContainer放在上层, 包含了数据和所有状态相关的widgets.
child widget不论在哪一层都可以方便地获取到状态数据.

  Text(
    '${CounterStateContainer.of(context).counter.value}',
  ),

代码分支: inherited-widget.

InheritedWidget缺点

InheritedWidget解决了访问状态和根据状态更新的问题, 但是改变state却不太行.

  • accessing state
  • updating on change
  • mutating state -> X

首先, 不支持跨页面(route)的状态, 因为widget树变了, 所以需要进行跨页面的数据传递.

其次, InheritedWidget它包含的数据是不可变的, 如果想让它跟踪变化的数据:

  • 把它包在一个StatefulWidget里.
  • 在InheritedWidget中使用ValueNotifier, ChangeNotifier或steams.

这个方案也是了解一下, 实际的全局状态管理还是用更成熟的方案.
但是它的原理会被用到其他方案中作为对象传递的方式.

Scoped Model

scoped model是一个外部package: https://pub.dev/packages/scoped_model
Scoped Model是基于InheritedWidget的. 思想仍然是把状态提到上层去, 并且封装了状态改变的通知部分.

Scoped Model实现

它官方提供例子就是改造counter: https://pub.dev/packages/scoped_model#-example-tab-

  • 添加scoped_model依赖.
  • 创建数据类, 继承Model.
import 'package:scoped_model/scoped_model.dart';

class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }

  void decrement() {
    _counter--;
    notifyListeners();
  }
}

其中数据变化的部分会通知listeners, 它们收到通知后会rebuild.

在上层初始化并提供数据类, 用ScopeModel.

访问数据有两种方法:

  • 用ScopedModelDescendant包裹widget.
  • 用ScopedModel.of静态方法.

使用的时候注意要提供泛型类型, 会帮助我们找到离得最近的上层ScopedModel.

  ScopedModelDescendant<CounterModel>(
      builder: (context, child, model) {
    return Text(
      model.counter.toString(),
    );
  }),

数据改变后, 只有ScopedModelDescendant会收到通知, 从而rebuild.

ScopedModelDescendant有一个rebuildOnChange属性, 这个值默认是true.
对于button来说, 它只是控制改变, 自身并不需要重绘, 可以把这个属性置为false.

  ScopedModelDescendant<CounterModel>(
    rebuildOnChange: false,
    builder: (context, child, model) {
      return FloatingActionButton(
        onPressed: model.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      );
    },
  ),

scoped model这个库帮我们解决了数据访问和通知的问题, 但是rebuild范围需要自己控制.

  • access state
  • notify other widgets
  • minimal rebuild -> X -> 因为需要开发者自己来决定哪一部分是否需要被重建, 容易被忘记.

代码分支: scoped-model

Provider

Provider是官方文档的例子用的方法.
去年的Google I/O 2019也推荐了这个方法.
和BLoC的流式思想相比, Provider是一个观察者模式, 状态改变时要notifyListeners().

有一个counter版本的sample: https://github.com/flutter/samples/tree/master/provider_counter

Provider的实现在内部还是利用了InheritedWidget.
Provider的好处: dispose指定后会自动被调用, 支持MultiProvider.

Provider实现

  • model类继承ChangeNotifer, 也可以用with.
class CounterModel extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }

  void decrement() {
    value--;
    notifyListeners();
  }
}
  • 数据提供者: ChangeNotifierProvider.
void main() => runApp(ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ));
  • 数据消费者/操纵者, 有两种方式: Consumer包裹, 用Provider.of.
  Consumer<CounterModel>(
    builder: (context, counter, child) => Text(
      '${counter.value}',
    ),
  ),

FAB:

  FloatingActionButton(
    onPressed: () =>
        Provider.of<CounterModel>(context, listen: false).increment(),
  ),

这里listen置为false表明状态变化时并不需要rebuild FAB widget.

Provider性能相关的实现细节

  • Consumer包裹的范围要尽量小.
  • listen变量.
  • child的处理. Consumer中builder方法的第三个参数.

可以用于缓存一些并不需要重建的widget:

return Consumer<CartModel>(
  builder: (context, cart, child) => Stack(
        children: [
          // Use SomeExpensiveWidget here, without rebuilding every time.
          child,
          Text("Total price: ${cart.totalPrice}"),
        ],
      ),
  // Build the expensive widget here.
  child: SomeExpensiveWidget(),
);

代码分支: provider.

BLoC

BLoC模式的全称是: business logic component.

所有的交互都是a stream of asynchronous events.
Widgets + Streams = Reactive.

BLoC的实现的主要思路: Events in -> BloC -> State out.

Google I/O 2018上推荐的还是这个, 2019就推荐Provider了.
当然也不是说这个模式不好, 架构模式本来也没有对错之分, 只是技术选型不同.

BLoC手动实现

不添加任何依赖可以手动实现BLoC, 利用:

  • Dart SDK > dart:async > Stream.
  • Flutter的StreamBuilder: 输入是一个stream, 有一个builder方法, 每次stream中有新值, 就会rebuild.

可以有多个stream, UI只在自己感兴趣的信息发生变化的时候重建.

BLoC中:

  • 输入事件: Sink<Event> input.
  • 输出数据: Stream<Data> output.

CounterBloc类:

class CounterBloc {
  int _counter = 0;

  final _counterStateController = StreamController<int>();

  StreamSink<int> get _inCounter => _counterStateController.sink;

  Stream<int> get counter => _counterStateController.stream;

  final _counterEventController = StreamController<CounterEvent>();

  Sink<CounterEvent> get counterEventSink => _counterEventController.sink;

  CounterBloc() {
    _counterEventController.stream.listen(_mapEventToState);
  }

  void _mapEventToState(CounterEvent event) {
    if (event is IncrementEvent) {
      _counter++;
    } else if (event is DecrementEvent) {
      _counter--;
    }
    _inCounter.add(_counter);
  }

  void dispose() {
    _counterStateController.close();
    _counterEventController.close();
  }
}

有两个StreamController, 一个控制state, 一个控制event.

读取状态值要用StreamBuilder:

  StreamBuilder(
    stream: _bloc.counter,
    initialData: 0,
    builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
      return Text(
        '${snapshot.data}',
      );
    },
  )

而改变状态是发送事件:

  FloatingActionButton(
    onPressed: () => _bloc.counterEventSink.add(IncrementEvent()),
  ),

实现细节:

  • 每个屏幕有自己的BLoC.
  • 每个BLoC必须有自己的dispose()方法. -> BLoC必须和StatefulWidget一起使用, 利用其生命周期释放.

代码分支: bloc

BLoC传递: 用InheritedWidget

手动实现的BLoC模式, 可以结合InheritedWidget, 写一个Provider, 用来做BLoC的传递.

代码分支: bloc-with-provider

BLoC rxdart实现

用了rxdart package之后, bloc模块的实现可以这样写:

class CounterBloc {
  int _counter = 0;

  final _counterSubject = BehaviorSubject<int>();

  Stream<int> get counter => _counterSubject.stream;

  final _counterEventController = StreamController<CounterEvent>();

  Sink<CounterEvent> get counterEventSink => _counterEventController.sink;

  CounterBloc() {
    _counterEventController.stream.listen(_mapEventToState);
  }

  void _mapEventToState(CounterEvent event) {
    if (event is IncrementEvent) {
      _counter++;
    } else if (event is DecrementEvent) {
      _counter--;
    }
    _counterSubject.add(_counter);
  }

  void dispose() {
    _counterSubject.close();
    _counterEventController.close();
  }
}

BehaviorSubject也是一种StreamController, 它会记住自己最新的值, 每次注册监听, 会立即给你最新的值.

代码分支: bloc-rxdart.

BLoC Library

可以用这个package来帮我们简化代码: https://pub.dev/packages/flutter_bloc

自己只需要定义Event和State的类型并传入, 再写一个逻辑转化的方法:

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  @override
  CounterState get initialState => CounterState.initial();

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield CounterState(counter: state.counter + 1);
    } else if (event is DecrementEvent) {
      yield CounterState(counter: state.counter - 1);
    }
  }
}

用BlocProvider来做bloc的传递, 从而不用在构造函数中一传到底.

访问的时候用BlocBuilder或BlocProvider.of<CounterBloc>(context).

  BlocBuilder(
    bloc: BlocProvider.of<CounterBloc>(context),
    builder: (BuildContext context, CounterState state) {
      return Text(
        '${state.counter}',
      );
    },
  ),

这里bloc参数如果没有指定, 会自动向上寻找.

BlocBuilder有一个参数condition, 是一个返回bool的函数, 用来精细控制是否需要rebuild.

  FloatingActionButton(
    onPressed: () =>
        BlocProvider.of<CounterBloc>(context).add(IncrementEvent()),
  ),

代码分支: bloc-library.

rxdart

这是个原始版本的流式处理.

和BLoC相比, 没有专门的逻辑模块, 只是改变了数据的形式.

利用rxdart, 把数据做成流:

class CounterModel {
  BehaviorSubject _counter = BehaviorSubject.seeded(0);

  get stream$ => _counter.stream;

  int get current => _counter.value;

  increment() {
    _counter.add(current + 1);
  }

  decrement() {
    _counter.add(current - 1);
  }
}

获取数据用StreamBuilder, 包围的范围尽量小.

    StreamBuilder(
      stream: counterModel.stream$,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return Text(
          '${snapshot.data}',
        );
      },
    ),

Widget dispose的时候会自动解绑.

数据传递的部分还需要进一步处理.

代码分支: rxdart.

Redux

Redux是前端流行的, 一种单向数据流架构.

概念:

  • Store: 用于存储State对象, 代表整个应用的状态.
  • Action: 事件操作.
  • Reducer: 用于处理和分发事件的方法, 根据收到的Action, 用一个新的State来更新Store.
  • View: 每次Store接到新的State, View就会重建.

Reducer是唯一的逻辑处理部分, 它的输入是当前State和Action, 输出是一个新的State.

Flutter Redux状态管理实现

首先定义好action, state:

enum Actions {
  Increment,
  Decrement,
}

class CounterState {
  int _counter;

  int get counter => _counter;

  CounterState(this._counter);
}

reducer方法根据action和当前state产生新的state:

CounterState reducer(CounterState prev, dynamic action) {
  if (action == Actions.Increment) {
    return new CounterState(prev.counter + 1);
  } else if (action == Actions.Decrement) {
    return new CounterState(prev.counter - 1);
  } else {
    return prev;
  }
}
  • 数据提供者: StoreProvider.
    放在上层:
   StoreProvider(
    store: store,
    child: MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    ),
  );
  • 数据消费者: StoreConnector, 可读可写.

读状态:

    StoreConnector<CounterState, String>(
      converter: (store) => store.state.counter.toString(),
      builder: (context, count) {
        return Text(
          '$count',
        );
      },
    )

改变状态: 发送action:

    StoreConnector<CounterState, VoidCallback>(
      converter: (store) {
        return () => store.dispatch(action.Actions.Increment);
      },
      builder: (context, callback) {
        return FloatingActionButton(
          onPressed: callback,
        );
      },
    ),

代码分支: redux.

MobX

MobX本来是一个JavaScript的状态管理库, 它迁移到dart的版本: mobxjs/mobx.dart.

核心概念:

  • Observables
  • Actions
  • Reactions

MobX状态管理实现

官网提供了一个counter的指导: https://mobx.netlify.com/getting-started

这个库的实现需要先生成一些代码.
先写类:

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = _Counter with _$Counter;

abstract class _Counter with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }

  @action
  void decrement() {
    value--;
  }
}

运行命令flutter packages pub run build_runner build, 生成counter.g.dart.

改完之后就不需要再使用StatefulWidget了.

找一个合适的地方初始化数据对象并保存:

final counter = Counter();

读取值的地方用Observer包裹:

Observer(
  builder: (_) => Text(
    '${counter.value}',
    style: Theme.of(context).textTheme.display1,
  ),
),

改变值的地方:

  FloatingActionButton(
    onPressed: counter.increment,
    tooltip: 'Increment',
    child: Icon(Icons.add),
  ),

代码分支: mobx.

Flutter hooks

React hooks的Flutter实现.
package: https://pub.dev/packages/flutter_hooks

Hooks存在的目的是为了增加widgets之间的代码共享, 取代StatefulWidget.

首页的例子是: 对一个使用了AnimationController的StatefulWidget的简化.

flutter_hooks包中已经内置了一些已经写好的hooks.

Flutter hooks useState

counter demo一个最简单的改法, 就是将StatefulWidget改为HookWidget.

在build方法里:

final counter = useState(0);

调用useState方法设定一个变量, 并设定初始值, 每次值改变的时候widget会被rebuild.

使用值:

  Text(
    '${counter.value}',
  ),

改变值:

  FloatingActionButton(
    onPressed: () => counter.value++,
  ),

实际上是把StatefulWidget包装了一下, 在初始化Hook的时候注册了listener, 数据改变的时候调用setState()方法.
只是把这些操作藏在hook里, 不需要开发者手动调用而已.

所以本质上还是StatefulWidget, 之前解决不了的问题它依然解决不了.

代码分支: flutter-hooks.

Demo

本文demo地址: https://github.com/mengdd/counter_state_management
每个分支对应一种实现. 切换不同分支查看不同的状态管理方法.

对于代码的说明:
这是counter app用不同的状态管理模式进行的改造.
因为这个demo的逻辑和UI都比较简单, 可能实际上并不需要用上一些复杂的状态管理方法, 有种杀鸡用牛刀的感觉.
只是为了保持简单来突出状态管理的实现, 说明用法.

一些自己的感想

老实说, 做了这么多年Android, 各种构架MVP, MVVM, MVI, 目的就是数据和逻辑分离, 逻辑和UI分离,
所以初识Flutter的时候对这种万物皆widget, 一个树里面包含一切的方式有点怀疑, UI逻辑数据写成一堆, 程序功能复杂后, 肯定会越写越乱.

但是了解了它的状态管理之后, 发现Flutter的状态管理就是它的程序构架, 并且也是百家争鸣各取所需.
只是Flutter的构架是服务于Flutter framework的设计思想的, 要遵从利用它, 而不是与之反抗.
爱它如是, 而不是如我所愿.

印证了一些道理:

  • 不要只喜欢自己熟悉的东西.
  • 了解之后才有发言权.

参考

Google I/O

InheritedWidget

Scoped Model

provider

Bloc

Redux

MobX

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,098评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,213评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,960评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,519评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,512评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,533评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,914评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,574评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,804评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,350评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,933评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2赞 342