Day11 - Flutter - 状态State管理

概述

• 为什么需要状态管理？
• 共享状态管理

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

• 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功能类似，可以实现跨组件数据的传递。
  定义一个共享数据的InheritedWidget，需要继承自InheritedWidget

  • 这里定义了一个of方法，该方法通过context开始去查找祖先的JKDataWidget（可以查看源码查找过程）

  • updateShouldNotify方法是对比新旧JKDataWidget，是否需要对更新相关依赖的Widget

    class JKCounterWidget extends InheritedWidget {
        /* 1.共享的数据 */
        final int counter;
    
        /* 2.自定义的构造方法 */
        JKCounterWidget({this.counter, Widget child}): super(child: child);
    
        /* 3.获取组件最近的当前的InheritedWidget */
        static JKCounterWidget of(BuildContext context) {
           /* 沿着Element树去找到最近的JKJKCounterElement, 从Element里面取出Widget对象 */
           return context.dependOnInheritedWidgetOfExactType();
        }
    
        /* 4.决定要不要回调State中didChangeDependencies() */
        /* 如果返回True, 执行依赖当期的InheritedWidget的State中的didChangeDependencies()，反之不会执行didChangeDependencies() */
        @override
        bool updateShouldNotify(InheritedWidget oldWidget) {
            return true;
        }
    }
    

    创建JKDataWidget，并且传入数据（这里点击按钮会修改数据，并且重新build）

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
          return MaterialApp(
              // 启动要显示的界面
              home: HomePage(),
          );
       }
    }
    
    class HomePage extends StatefulWidget {
        @override
        _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
        int _counter = 100;
    
        @override
        Widget build(BuildContext context) {
            return Scaffold(
               appBar: AppBar(
                  title: Text("图标组件示例"),
               ),
               body: JKCounterWidget(
                  counter: _counter,
                  child: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                           JKShowData01(),
                           JKShowData02()
                        ],
                    ),
                 ),
               ),
               floatingActionButton: FloatingActionButton(
                 child: Icon(Icons.add),
                 onPressed: () {
                     setState(() {
                        _counter++;
                     });
                 },
               ),
          );
       }
    }
    
    class JKShowData01 extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            int counter = JKCounterWidget.of(context).counter;
    
            return Card(
               color: Colors.brown,
               child: Text('当前计数：$counter', style: TextStyle(fontSize: 30, color: Colors.white),),
            );
        }
    }
    
    class JKShowData02 extends StatefulWidget {
       @override
       _JKShowData02State createState() => _JKShowData02State();
    }
    
    class _JKShowData02State extends State<JKShowData02> {
    
       @override
       void didChangeDependencies() {
           // TODO: implement didChangeDependencies
           super.didChangeDependencies();
    
           print('执行了');
       }
    
       @override
       Widget build(BuildContext context) {
           int counter = JKCounterWidget.of(context).counter;
    
           return Card(
              color: Colors.green,
              child: Text('当前计数：$counter', style: TextStyle(fontSize: 30, color: Colors.white),),
           );
       }
    }
    

    在某个Widget中使用共享的数据，并且监听，如上面的JKShowData01 和 JKShowData02

• 2.2、Provider
  Provider是目前官方推荐的全局状态管理工具，由社区作者Remi Rousselet 和 Flutter Team共同编写。
  使用之前，我们需要先引入对它的依赖，截止这篇文章，Provider的最新版本为 4.1.2，最新的我们可以到 https://pub.dev/ 搜所 provider

  dependencies:
      provider:^4.1.2
  

  • 2.2.1、Provider 的基本使用
    在使用Provider的时候，我们主要关心三个概念：

    • ChangeNotifier：真正数据（状态）存放的地方

    • ChangeNotifierProvider：Widget树中提供数据（状态）的地方，会在其中创建对应的ChangeNotifier

    • Consumer：Widget树中需要使用数据（状态）的地方
      我们先来完成一个简单的案例，将官方计数器案例使用Provider来实现：

    • 第一步：创建自己的ChangeNotifier
      我们需要一个ChangeNotifier来保存我们的状态，所以创建它

      • 这里我们可以使用继承(extends)自ChangeNotifier，也可以使用混入(with)，这取决于概率是否需要继承自其它的类

      • 我们使用一个私有的_counter，并且提供了getter和setter，提示：可以使用快捷键来快速生成 getter和setter 方法，鼠标放到类名上，cmd + n

        

      • 在setter中我们监听到_counter的改变，就调用notifyListeners方法，通知所有的Consumer进行更新

        import 'package:flutter/material.dart';
        /* with 代表混入
         *  Dart不支持多继承，如果我们的类继承多个类，那么就要使用 with
         *  如果我们的类没有继承于其他的类，那么就可以使用 extends 来继承ChangeNotifier
         */
        class JKCounterViewModel with ChangeNotifier {
            int _counter = 101;
        
            int get counter => _counter;
        
            set counter(int value) {
                 _counter = value;
        
                 /* 通知所有的监听 */
                 notifyListeners();
             }
        }
        

    • 第二步：在Widget Tree中插入ChangeNotifierProvider
      我们需要在Widget Tree中插入ChangeNotifierProvider，以便Consumer可以获取到数据：将ChangeNotifierProvider放到了顶层，这样方便在整个应用的任何地方可以使用CounterProvider

      void main() {
         runApp(
            ChangeNotifierProvider(
               child: MyApp(),
               create:  (ctx) => JKCounterViewModel(),
            ),
         );
      }
      

    • 第三步：在首页中使用Consumer引入和修改状态

      • 引入位置一：在body中使用Consumer，Consumer需要传入一个builder回调函数，当数据发生变化时，就会通知依赖数据的Consumer重新调用builder方法来构建；

      • 引入位置二：在floatingActionButton中使用Consumer，当点击按钮时，修改CounterNotifier中的counter数据；

        class JKHomePage extends StatelessWidget {
            @override
            Widget build(BuildContext context) {
                return Scaffold(
                   appBar: AppBar(
                      title: Text("列表测试"),
                   ),
                   body: Center(
                     child: Consumer< JKCounterViewModel >(
                         builder: (ctx, viewModel, child) {
                             return Text("当前计数:${viewModel.counter}", style: TextStyle(fontSize: 20, color: Colors.red),);
                         }
                      ),
                   ),
                   floatingActionButton: Consumer<CounterProvider>(
                      builder: (ctx, counterPro, child) {
                          return FloatingActionButton(
                              child: child,
                              onPressed: () {
                                  counterPro.counter += 1;
                              },
                          );
                      },
                      child: Icon(Icons.add),
                    ),
                 );
            }
        }
        

        提示：child: Icon(Icons.add) 和 child: child 配合使用是为了避免 Icon(Icons.add) 被重创建

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

      • 步骤四：在我们抽取出来的 Widget 里面 2 种 使用方式

        class JKShowData01 extends StatelessWidget {
           @override
           Widget build(BuildContext context) {
              int counter = Provider.of<JKCounterViewModel>(context).counter;
        
              print('---Data01 的 Build 的方法---');
        
              return Container(
                   color: Colors.brown,
                   child: Text('当前计数：$counter', style: TextStyle(fontSize: 30, color: Colors.white),),
              );
           }
        }
        
        class JKShowData02 extends StatelessWidget {
           @override
           Widget build(BuildContext context) {
        
                print('---Data02 的 Build 的方法---');
        
                return Container(
                    color: Colors.green,
                    child: Consumer<JKCounterViewModel>(
                        builder: (ctx, counter, child){
                           print("data02 Consumer build方法被执行");
                           return Text('当前计数：${counter.counter}', style: TextStyle(fontSize: 30, color: Colors.white),);
                        },
                     ),
                );
           }
        }
        

        提示：

        • 1、JKShowData01里面直接使用 int counter = Provider.of<JKCounterViewModel>(context).counter;，然后：直接使用 counter，缺点是：每次 counter 更新 JKShowData01 的 Widget build(BuildContext context) {} 都会走，影响性能
        • 2、JKShowData02里面使用 Consumer 就比较好了，JKShowData02 的 Widget build(BuildContext context) {} 不会走，Consumer在刷新整个Widget树时，会尽可能少的rebuild Widget，一定程度上提高了性能。

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

      • 比如当点击了floatingActionButton时，我们在代码的两处分别打印它们的builder是否会重新调用；
      • 我们会发现只要点击了floatingActionButton，两个位置都会被重新builder；
      • 但是floatingActionButton的位置有重新build的必要吗？没有，因为它是否在操作数据，并没有展示；
      • 如何可以做到让它不要重新build了？使用Selector来代替Consumer

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

      floatingActionButton: Selector<JKCounterViewModel, JKCounterViewModel>(
         selector: (ctx, counterVM) => counterVM,
         /* 要不要重新构建，true 那么loatingActionButton 的 builder 方法会被执行，反之false不会被执行*/
         shouldRebuild: (previous, next) => false,
         builder: (ctx, counterVM, child) {
             print('floatingActionButton 的 builder 方法被执行');
             return FloatingActionButton(
                child: child,
                onPressed: () {
                    counterVM.counter += 1;
                },
             );
         },
         child: Icon(Icons.add),
      )
      

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

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

      这个时候，我们重新测试点击floatingActionButton，floatingActionButton中的代码并不会进行rebuild操作。所以在某些情况下，我们可以使用Selector来代替Consumer，性能会更高。

      • 建议：只是依赖数据一般使用 Consumer；如果不是依赖数据，仅仅是修改数据那么一般使用 Selector。

  • 2.2.3. MultiProvider(多个数据共享)
    在开发中，我们需要共享的数据肯定不止一个，并且数据之间我们需要组织到一起，所以一个Provider必然是不够的。
    我们在增加一个新的ChangeNotifier：JKUserViewModel

    import 'package:flutter/cupertino.dart';
    import 'package:flutterdemo/day10/model/user_model.dart';
    
    class JKUserViewModel with ChangeNotifier {
         UserModel _userModel;
    
         JKUserViewModel(this._userModel);
    
         UserModel get userModel => _userModel;
    
         set userModel(UserModel value) {
              _userModel = value;
    
              /* 通知所有的监听 */
              notifyListeners();
         }
    }
    
    class UserModel {
        /* 名字 */
        String name;
        /* 等级 */
        int level;
        /* 头像 */
        String imageUrl;
    
        UserModel(this.name, this.level, this.imageUrl);
    }
    

    我们之前的使用

    void main() {
       runApp(
          ChangeNotifierProvider(
             child: MyApp(),
             create:  (ctx) => JKCounterViewModel(),
           ),
        );
    }
    

    上面仅仅是共享JKCounterViewModel，那么我们也想共享JKUserViewModel，那么怎么处理呢？

    • 方式一：多个Provider之间嵌套，这样做有很大的弊端，如果嵌套层级过多不方便维护，扩展性也比较差

      runApp(
         ChangeNotifierProvider(
            create: (ctx) => JKUserViewModel(UserModel('wc', 28, 'http://')),
            child: ChangeNotifierProvider(
                child: MyApp(),
                create:  (ctx) => JKCounterViewModel(),
            ),
         )
      );
      

    • 方式二：使用 MultiProvider （推荐使用）

      runApp(
         MultiProvider(
            child: MyApp(),
               providers: [
                  ChangeNotifierProvider(create: (ctx) => JKUserViewModel(UserModel('wc', 28, 'http://'))),
                  ChangeNotifierProvider(create: (ctx) => JKCounterViewModel(),)
               ],
            )
         );
      }
      

      提示：建议创建一个文件去管理共享的数据，比如创建一个 initalize_providers.dart 的类

      List<SingleChildWidget> providers = [
          ChangeNotifierProvider(create: (ctx) => JKUserViewModel(UserModel('wc', 28, 'http://')),),
          ChangeNotifierProvider(create: (ctx) => JKCounterViewModel(),)
      ];
      

      • 在使用的时候我们就可以直接如下

        runApp(
           MultiProvider(
              child: MyApp(),
              providers: providers
           )
        );
        

  • 拓展：在一个Consumer里里使用多个 共享的model，如：Consumer2代表有两个参数如下

    Consumer2<JKCounterViewModel, JKUserViewModel>(
         builder: (ctx, counter, user, child){
             return Text('当前计数：${counter.counter} 名字：${user.userModel.name}', style: TextStyle(fontSize: 30, color: Colors.white),);
         },
    )
    

    提示一：Consumer2 代表两个参数，那么 builder: (ctx, counter, user, child)里面也是两个 共享的model
    提示二：Consumer最多到 Consumer6，再多就要 Consumer 嵌套使用了