阅读 1204
绕开`setState`,直接使用`Element`实现状态管理,关联刷新

绕开`setState`,直接使用`Element`实现状态管理,关联刷新

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

链接扩展

  1. 初学InheritedWidget的同学可以先看这篇文章 Flutter使用InheritedWidget
  2. 进阶篇,InheritedWidget+Notifier实现状态管理模式 自定义InheritedProvider
  3. 进阶篇,状态管理刷新构思RxBinder

基于setState进行状态管理刷新

之前写过两篇状态管理的文章(如上链接扩展2,3)。总体思想:使用 StatefulWidget作为父节点,监听Notifier数据源变动,触发更新后,使用setState()重走build。中间部件使用Inherited实现数据共享及局部刷新能力。

image.png

绕开Stateful,直接通过Element刷新

在进入正题之前,我们首先要明确两个提高页面性能的优化点:

  • 能使用StatelessWidget的地方就不使用StatefulWidget
  • flutter整体为树状结构进行绘制,能采用局部刷新的地方,不采用全量刷新

闲话不多说,我们直接上代码:

///自定义的状态管理工具
class RxInheritedProvider<T extends ChangeNotifier> extends StatelessWidget {
  final T create;
  final Widget Function(BuildContext context) builder;

  const RxInheritedProvider({
    Key? key,
    required this.create,
    required this.builder,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RxInheritedWidget(
      child: Builder(builder: (context) => builder(context)),
      value: create,
    );
  }
}

class RxInheritedWidget<T extends ChangeNotifier> extends InheritedNotifier<T> {
  RxInheritedWidget({
    required T value,
    required Widget child,
  }) : super(notifier: value, child: child);

  get value => this.notifier;
}
复制代码

核心:使用了官方SDK提供的封装类InheritedNotifier<T>,下面截取部分InheritedNotifier关键代码探讨思想

///代码来自SDK
abstract class InheritedNotifier<T extends Listenable> extends InheritedWidget {
  
  const InheritedNotifier({
    Key key,
    this.notifier,
    @required Widget child,
  }) : assert(child != null),
       super(key: key, child: child);

 
  final T notifier;

  @override
  bool updateShouldNotify(InheritedNotifier<T> oldWidget) {
    return oldWidget.notifier != notifier;
  }

  @override
  _InheritedNotifierElement<T> createElement() => _InheritedNotifierElement<T>(this);
}
复制代码

Widget层平白无奇,属于简单的封装,重点我们来看看 _InheritedNotifierElement<T>

//代码来自SDK
class _InheritedNotifierElement<T extends Listenable> extends InheritedElement {
  _InheritedNotifierElement(InheritedNotifier<T> widget) : super(widget) {
    widget.notifier?.addListener(_handleUpdate);
  }

  @override
  InheritedNotifier<T> get widget => super.widget as InheritedNotifier<T>;

  bool _dirty = false;

  @override
  void update(InheritedNotifier<T> newWidget) {
    final T oldNotifier = widget.notifier;
    final T newNotifier = newWidget.notifier;
    if (oldNotifier != newNotifier) {
      oldNotifier?.removeListener(_handleUpdate);
      newNotifier?.addListener(_handleUpdate);
    }
    super.update(newWidget);
  }

  @override
  Widget build() {
    if (_dirty)
      notifyClients(widget);
    return super.build();
  }

  void _handleUpdate() {
    _dirty = true;
    markNeedsBuild();
  }

  @override
  void notifyClients(InheritedNotifier<T> oldWidget) {
    super.notifyClients(oldWidget);
    _dirty = false;
  }

  @override
  void unmount() {
    widget.notifier?.removeListener(_handleUpdate);
    super.unmount();
  }
}
复制代码

_InheritedNotifierElement 都做了些什么?

  • _InheritedNotifierElement对数据源Notifier进行了监听,当触发变动时,调用markNeedsBuild重走build方法
  • 我们知道InheritedElementbuild方法并不会重新刷新自己以及子节点。_InheritedNotifierElement重写了build方法,在方法里进行条件判断,调用了notifyClients对依赖项进行刷新操作

这样,白嫖系统提供的InheritedNotifier<T>,监听数据源进行局部刷新的能力实现了。我们还需要一个工具类用来注册绑定关系。

///提供注册依赖方法
abstract class RxTool {
  static T of<T extends ChangeNotifier>(BuildContext context) {
    return (_getInheritedElement<T>(context).widget as RxInheritedWidget<T>).value;
  }

  static void register<T extends ChangeNotifier>(BuildContext context) {
    var element = _getInheritedElement<T>(context);
    // context.dependOnInheritedElement(element);

    context.dependOnInheritedWidgetOfExactType<RxInheritedWidget<T>>(aspect: element.widget);

    //这种方式不产生关联关系
    // context.getElementForInheritedWidgetOfExactType<RxInheritedWidget<T>>();
  }

  static InheritedElement _getInheritedElement<T extends ChangeNotifier>(
      BuildContext context) {
    var element = context.getElementForInheritedWidgetOfExactType<RxInheritedWidget<T>>();
    if (element == null) {
      throw (Exception("RxInheritedWidget<${T.runtimeType}> is find null"));
    }
    return element;
  }
}
复制代码

提供 register 方法,将 contextInheritedElement 发生绑定依赖关系。在执行 notifyClient() 方法时进行依赖刷新。绑定依赖的方法有两种,根据需要选其一即可:

  • context.dependOnInheritedElement(element)
  • context.dependOnInheritedWidgetOfExactType<RxInheritedWidget<T>>(aspect: element.widget),注意泛型一定要与provider完全匹配,否则无法关联成功

新建 ConsumerBuilder 封装注册依赖,以及获取共享数据

class ConsumerBuilder<T extends ChangeNotifier> extends StatelessWidget {
  final Widget Function(BuildContext context, T value) builder;

  const ConsumerBuilder({Key? key, required this.builder}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    RxTool.register<T>(context);
    return builder(
      context,
      RxTool.of<T>(context),
    );
  }
}
复制代码

运行 Demo

/// demo 示例
class Counter extends ChangeNotifier {
  int count = 0;
  void increase() {
    ++count;
    notifyListeners();
  }
}

class TestWidget extends StatelessWidget {
  TestWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RxInheritedProvider(
          create: Counter(),
          builder: (context) {
            return Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  _child(),
                  Builder(builder: (context) {
                    return TextButton(
                        child: Text("自增"),
                        onPressed: () {
                          RxTool.of<Counter>(context).increase();
                        });
                  }),
                ],
              ),
            );
          }),
    );
  }

  Widget _child() {
    return ConsumerBuilder<Counter>(builder: (context, counter) {
      return Text(
        '点击了 ${counter.count} 次',
        style: TextStyle(fontSize: 30.0),
      );
    });
  }
}
复制代码

亲测有效,运行界面就不截图了,欢迎评论区交流讨论。

文章分类
前端
文章标签