Flutter状态管理

一. 为什么需要状态管理？

1.1. 认识状态管理

很多从命令式编程框架（Android或iOS原生开发者）转成声明式编程（Flutter、Vue、React等）刚开始并不适应，因为需要一个新的角度来考虑APP的开发模式。

Flutter作为一个现代的框架，是声明式编程的：

在编写一个应用的过程中，我们有大量的State需要来进行管理，而正是对这些State的改变，来更新界面的刷新。

1.2. 不同状态管理分类

1.2.1. 短时状态Ephemeral state

某些状态只需要在自己的Widget中使用即可

比如我们之前做的简单计数器counter
比如一个PageView组件记录当前的页面
比如一个动画记录当前的进度
比如一个BottomNavigationBar中当前被选中的tab

这种状态我们只需要使用StatefulWidget对应的State类自己管理即可，Widget树中的其它部分并不需要访问这个状态。

这种方式在之前的学习中，我们已经应用过非常多次了。

1.2.2. 应用状态App state

开发中也有非常多的状态需要在多个部分进行共享

比如用户一个个性化选项
比如用户的登录状态信息
比如一个电商应用的购物车
比如一个新闻应用的已读消息或者未读消息

这种状态我们如果在Widget之间传递来、传递去，那么是无穷尽的，并且代码的耦合度会变得非常高，牵一发而动全身，无论是代码编写质量、后期维护、可扩展性都非常差。

这个时候我们可以选择全局状态管理的方式，来对状态进行统一的管理和应用。

1.2.3. 如何选择不同的管理方式

开发中，没有明确的规则去区分哪些状态是短时状态，哪些状态是应用状态。

某些短时状态可能在之后的开发维护中需要升级为应用状态。

但是我们可以简单遵守下面这幅流程图的规则：

针对React使用setState还是Redux中的Store来管理状态哪个更好的问题，Redux的issue上，Redux的作者Dan Abramov，它这样回答的：

The rule of thumb is: Do whatever is less awkward
经验原则就是：选择能够减少麻烦的方式。

二. 共享状态管理

2.1. InheritedWidget

InheritedWidget和React中的context功能类似，可以实现跨组件数据的传递，（Inherited是继承的意思）。

定义一个共享数据的InheritedWidget，需要继承自InheritedWidget。

我们想要达到的效果是，HYShowData01和HYShowData02都使用公共的数据counter，所以HYCounterWidget要包裹住HYShowData01和HYShowData02。
点击按钮的时候counter+1，所以HYCounterWidget里面的counter不能写死，要在我们创建HYCounterWidget的时候传进去。
这里定义了一个of方法，该方法通过context开始去查找祖先的HYDataWidget（可以查看源码查找过程）。
updateShouldNotify方法是对比新旧HYDataWidget，是否需要对更新相关依赖的Widget。

代码如下：根据1-9步骤查看即可

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

// 共享数据的widget
class HYCounterWidget extends InheritedWidget {
  // 1.想要共享的数据
  final int counter;

  // 2.定义构造方法
  HYCounterWidget({this.counter, Widget child}): super(child: child);

  // 3. 创建静态方法，通过类名来调用，一般约定起名of
  // 方法的作用是获取组件父级最近的InheritedWidget
  static HYCounterWidget of(BuildContext context) {
    // 下面一行代码的作用：沿着Element树, 去找到最近的HYCounterElement, 从Element中取出Widget对象
    return context.dependOnInheritedWidgetOfExactType();
  }

  // 必须实现这个方法
  // 4.决定要不要回调State中的didChangeDependencies方法
  // 如果返回true: 执行依赖的InheritedWidget的State中的didChangeDependencies方法
  @override
  bool updateShouldNotify(HYCounterWidget oldWidget) {
    return oldWidget.counter != counter;
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      home: HYHomePage(),
    );
  }
}

class HYHomePage extends StatefulWidget {
  @override
  _HYHomePageState createState() => _HYHomePageState();
}

class _HYHomePageState extends State<HYHomePage> {
  int _counter = 100;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("InheritedWidget"),
      ),
      // 5. 我们想要在HYShowData01和HYShowData02里面使用共享的数据，所以需要用HYCounterWidget来包裹子组件
      body: HYCounterWidget(
        // 6. 创建HYCounterWidget的时候我们传进去一个counter
        // 然后点击按钮的时候改变这个counter的值，就可以了使界面上显示的数据发生变化
        counter: _counter,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              HYShowData01(),
              HYShowData02()
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            _counter++;
          });
        },
      ),
    );
  }
}


// StatefulWidget
class HYShowData01 extends StatefulWidget {
  @override
  _HYShowData01State createState() => _HYShowData01State();
}

class _HYShowData01State extends State<HYShowData01> {

  // 9. 当构建的widget依赖某个InheritedWidget，当InheritedWidget里面的数据发生改变，就会执行didChangeDependencies这个方法
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("执行了_HYShowData01State中的didChangeDependencies");
  }

  @override
  Widget build(BuildContext context) {
    // 7. 取出共享的数据
    // 内部是沿着Element树, 去找到最近的HYCounterElement, 从Element中取出Widget对象
    int counter = HYCounterWidget.of(context).counter;

    return Card(
      color: Colors.red,
      // 8. 使用共享的数据
      child: Text("当前计数: $counter", style: TextStyle(fontSize: 30),),
    );
  }
}

// StatelessWidget
class HYShowData02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 取出共享的数据
    int counter = HYCounterWidget.of(context).counter;

    return Container(
      color: Colors.blue,
      child: Text("当前计数: $counter", style: TextStyle(fontSize: 30),),
    );
  }
}

这样我们就达到了在某个Widget中使用共享的数据，并且监听数据的改变。

补充：context.dependOnInheritedWidgetOfExactType()的源码分析

  @override
  T? dependOnInheritedWidgetOfExactType<T extends InheritedWidget>({Object? aspect}) {
    assert(_debugCheckStateIsActiveForAncestorLookup());
    // 1. 先在map中找_inheritedWidgets
    final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T];
    if (ancestor != null) {
      // 2. 调用
      return dependOnInheritedElement(ancestor, aspect: aspect) as T;
    }
    _hadUnsatisfiedDependencies = true;
    return null;
  }

  @override
  InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object? aspect }) {
    assert(ancestor != null);
    _dependencies ??= HashSet<InheritedElement>();
    _dependencies!.add(ancestor);
    // 2.1 这里决定数据刷新的时候要不要调用didChangeDependencies方法
    ancestor.updateDependencies(this, aspect);
    // 2.2 最后返回我们需要的InheritedWidget
    return ancestor.widget as InheritedWidget;
  }

2.2. Provider

Provider是目前官方推荐的全局状态管理工具，由社区作者Remi Rousselet 和 Flutter Team共同编写。

使用之前，我们需要先引入对它的依赖，截止这篇文章，Provider的最新版本为4.0.4：

dependencies:
  provider: ^4.0.4

2.2.1. Provider的基本使用

在使用Provider的时候，我们主要关心三个概念：

ChangeNotifier：真正数据（状态）存放的地方
ChangeNotifierProvider：Widget树中提供数据（状态）的地方，会在其中创建对应的ChangeNotifier
Consumer：Widget树中需要使用数据（状态）的地方

我们先来完成一个简单的案例，将官方计数器案例使用Provider来实现：

第一步：创建自己的ChangeNotifier

我们需要一个ChangeNotifier来保存我们的状态，所以创建它

这里我们可以使用继承自ChangeNotifier，也可以使用混入，这取决于概率是否需要继承自其它的类
我们使用一个私有的_counter，并且提供了getter和setter
在setter中我们监听到_counter的改变，就调用notifyListeners方法，通知所有的Consumer进行更新

counter_view_model.dart代码如下：

import 'package:flutter/material.dart';

// 1.创建自己需要共享的数据
// 为了实现数据改变通知view刷新，我们需要继承(extends)或者混入(with)ChangeNotifier
class HYCounterViewModel extends ChangeNotifier {
  int _counter = 100;

  //  command+n快捷键，可以快速生成重写set、get方法
  int get counter => _counter;
  set counter(int value) {
    _counter = value;
    // 数据改变，通知widget刷新数据
    notifyListeners();
  }
}

第二步：在Widget Tree中插入ChangeNotifierProvider

我们需要在Widget Tree中插入ChangeNotifierProvider，以便Consumer可以获取到数据：

将ChangeNotifierProvider放到了顶层，这样方便在整个应用的任何地方可以使用CounterProvider

void main() {
  runApp(
    // 2.在应用程序的顶层ChangeNotifierProvider
    ChangeNotifierProvider(
      // 返回刚才创建的ViewModel
      create: (ctx) => HYCounterViewModel(),
      child: MyApp(),
    )
  );
}

第三步：在首页使用和修改共享数据

具体如下：

2.2.2. 使用Provider.of

事实上，因为Provider是基于InheritedWidget，所以我们在使用ChangeNotifier中的数据时，我们可以通过Provider.of的方式来使用，比如下面的代码：

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("调用了HYHomePage的build方法");
    return Scaffold(
      appBar: AppBar(
        title: Text("Provider"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("当前计数:${Provider.of<HYCounterViewModel>(context).counter}",
              style: TextStyle(fontSize: 30, color: Colors.purple),
            )
          ],
        ),
      ),
    );
  }
}

这种方式不好，因为当数据发生改变的时候，会重新调用Widget的build方法，非常消耗性能，开发中我们几乎不用。

2.2.3. 使用Consumer

引入位置一：在body中使用Consumer，Consumer需要传入一个builder回调函数，当数据发生变化时，就会通知依赖数据的Consumer重新调用builder方法来构建（这样就不会调用整个Widget的build方法，节省了性能）。
引入位置二：在floatingActionButton中使用Consumer，当点击按钮时，修改CounterNotifier中的counter数据；

class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("列表测试"),
      ),
      body: Center(
        child: Consumer<HYCounterViewModel>(
          builder: (ctx, counterVM, child) {
            return Text("当前计数:${counterVM.counter}", style: TextStyle(fontSize: 20, color: Colors.red),);
          }
        ),
      ),
      // 将FloatingActionButton包裹一层，这样才能拿到HYCounterViewModel，从而修改里面的数据
      floatingActionButton: Consumer<HYCounterViewModel>(
        builder: (ctx, counterVM, child) { // 这里的第三个参数child就是下面的child: Icon(Icons.add)
          return FloatingActionButton(
            child: child,
            onPressed: () {
              // 修改HYCounterViewModel里面的数据，界面也会刷新
              counterVM.counter += 1;
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Consumer的builder方法解析：

参数一：context，每个build方法都会有上下文，目的是知道当前树的位置
参数二：ChangeNotifier对应的实例，也是我们在builder函数中主要使用的对象
参数三：child，目的是进行优化，如果builder下面有一颗庞大的子树，当模型发生改变的时候，我们并不希望重新build这颗子树，那么就可以将这颗子树放到Consumer的child中，在这里直接引入即可（注意上面代码的Icon所放的位置，这也是优化的第一点）

2.2.4. 使用Selector

Consumer是否是最好的选择呢？并不是，它也会存在弊端。

如下代码，有两行打印。

当数据发生改变的时候，这两行都会打印，第一个可以理解，因为要刷新界面，但是floatingActionButton没必要重新构建，因为它是否在操作数据，并没有展示。如何可以做到让它不要重新build了？使用Selector来代替Consumer。

我们先直接实现代码，再解释其中的含义：

floatingActionButton: Selector<HYCounterViewModel, HYCounterViewModel>(
  // Selector有两个泛型<A, S>，会在selector的函数里面将A修改一下，最后返回S，我们不做修改
  selector: (ctx,countVM) => countVM,
  // 要不要重新构建？如果返回false就不用重新构建，这样我们点击+的时候数据发生改变，但是下面的builder不会重新构建
  shouldRebuild: (pre, next) => false,
  builder: (ctx, countVM, child) {
    print("floatingActionButton展示的位置builder被调用");
    return FloatingActionButton(
      child: child,
      onPressed: () {
        countVM.counter += 1;
      },
    );
  },
  child: Icon(Icons.add),
),

Selector和Consumer对比，不同之处主要是三个关键点：

关键点1：泛型参数是两个<A, S>
- 泛型参数一：我们这次要使用的Provider
- 泛型参数二：转换之后的数据类型，比如我这里转换之后依然是使用HYCounterViewModel，那么他们两个就是一样的类型
关键点2：selector回调函数
- 转换的回调函数，你希望如何进行转换
- S Function(BuildContext, A) selector
- 我这里没有进行转换，所以直接将A实例返回即可
关键点3：是否希望重新rebuild
- 这里也是一个回调函数，我们可以拿到转换前后的两个实例；
- bool Function(T previous, T next);
- 因为这里我不希望它重新rebuild，无论数据如何变化，所以这里我直接return false；

这个时候，我们重新测试点击floatingActionButton，floatingActionButton中的代码并不会进行rebuild操作。

所以在某些情况下，我们可以使用Selector来代替Consumer，性能会更高。

总结：

创建自己需要共享的数据
在应用程序的顶层ChangeNotifierProvider
在其它位置使用共享的数据
方式一：Provider.of：当Provider中的数据发生改变时, Provider.of所在的Widget整个build方法都会重新构建
方式二：Consumer(相对推荐)：当Provider中的数据发生改变时, 执行重新执行Consumer的builder
方式三：Selector：1.selector方法(对原有的数据进行转换) 2.shouldRebuild(要不要重新构建)
开发中如果只是单纯的使用数据，就使用Consumer，如果要对数据进行修改，就使用Selector

2.2.5. MultiProvider

在开发中，我们需要共享的数据肯定不止一个，并且数据之间我们需要组织到一起，所以一个Provider必然是不够的。

我们再增加一个新的ChangeNotifier。

import 'package:flutter/material.dart';

class UserInfo {
  String nickname;
  int level;

  UserInfo(this.nickname, this.level);
}

class UserProvider extends ChangeNotifier {
  UserInfo _userInfo = UserInfo("why", 18);

  set userInfo(UserInfo info) {
    _userInfo = info;
    notifyListeners();
  }

  get userInfo {
    return _userInfo;
  }
}

如果在开发中我们有多个Provider需要提供应该怎么做呢？

方式一：多个Provider之间嵌套

这样做有很大的弊端，如果嵌套层级过多不方便维护，扩展性也比较差

  runApp(ChangeNotifierProvider(
    create: (context) => CounterProvider(),
    child: ChangeNotifierProvider(
      create: (context) => UserProvider(),
      child: MyApp()
    ),
  ));

方式二：使用MultiProvider

runApp(MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (ctx) => CounterProvider()),
    ChangeNotifierProvider(create: (ctx) => UserProvider()),
  ],
  child: MyApp(),
));

开发中，我们一般将providers数组抽取到一个文件里面，如下：

import 'package:provider/provider.dart';
import 'package:provider/single_child_widget.dart';
import 'counter_view_model.dart';
import 'user_view_model.dart';
import '../model/user_info.dart';

List<SingleChildWidget> providers = [
  ChangeNotifierProvider(create: (ctx) => HYCounterViewModel(),),
  ChangeNotifierProvider(create: (ctx) => HYUserViewModel(UserInfo("why", 29, "abc")),),
];

如果我们需要使用两个vm的数据，咋办呢？嵌套的确是可以的，但是太麻烦的，一般我们使用Consumer2、Consumer3、Consumer4，等等。

class HYShowData03 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Provider.of Consumer Selector Consumer2
    return Consumer2<HYUserViewModel, HYCounterViewModel>(
      builder: (ctx, userVM, counterVM, child) {
        return Text(
          "nickname:${userVM.user.nickname} counter:${counterVM.counter}",
          style: TextStyle(fontSize: 30),
        );
      },
    );
  }
}

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