Day11 - Flutter - 状态State管理

作者: IIronMan | 来源:发表于2020-05-28 13:42 被阅读0次

概述

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

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

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 嵌套使用了

Day11 - Flutter - 状态State管理

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

二、共享状态管理

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter

Flutter初探