flutter：探究 `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方法
• 我们知道InheritedElement的build方法并不会重新刷新自己以及子节点。_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 方法，将 context 与 InheritedElement 发生绑定依赖关系。在执行 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),
      );
    });
  }
}

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