前言
人心中的成见是一座大山，任你怎么努力都休想搬动。
这是电影《哪吒》里申公豹说的一句话，也是贯彻整部电影的一个主题；或许这句话引起了太多人的共鸣：35 岁职场危机，大厂卡本科学历，无房无车结婚难等等，所以，这句话也经常被人提起。
同时，因为 GetX 作者的一些言论，也让一些成见一直伴随着 GetX 这个框架。
我写这篇文章，并不是为 GetX 正名
GetX 整体设计，有不少优秀点思想，我希望将这些优秀设计思路展现给大家；或许会对你设计自己的框架有一些帮助，同时也是对自己思考历程的一个记录。
前置知识
在说 GetX 设计思想之前，需要先介绍几个知识，在 Flutter 茁壮发展的历程里，他们都留下了浓墨重彩的一笔
InheritedWidget
不得不说，这个控件真的是一个神奇控件，它就仿佛是一把神兵利器
宝刀屠龙，号令天下，莫敢不从，倚天不出，谁与争锋
倚天剑，剑藏《九阴真经》
屠龙刀，刀藏《降龙十八掌》、《武穆遗书》
InheritedWidget 这把神兵藏有什么？
数据传输
InheritedWidget 是我们统称的一个控件名，精髓还是 InheritedElement，InheritedWidget 的数据传递，来看下存和取这俩个过程
存数据
class TransferDataWidget extends InheritedWidget { TransferDataWidget({required Widget child}) : super(child: child);
@override bool updateShouldNotify(InheritedWidget oldWidget) => false;
@override InheritedElement createElement() => TransferDataElement(this);}
class TransferDataElement extends InheritedElement { TransferDataElement(InheritedWidget widget) : super(widget);
///随便初始化什么, 设置只读都行 String value = '传输数据';}
复制代码
取数据
var transferDataElement = context.getElementForInheritedWidgetOfExactType<TransferDataWidget>() as TransferDataElement?;var msg = transferDataElement.value;
复制代码
可以发现，我们只需要通过 Element 的 getElementForInheritedWidgetOfExactType 方法，就可以拿到父节点的 TransferDataElement 实例（必须继承 InheritedElement）
拿到实例后，自然就可以很简单的拿到相应数据了
原理
abstract class Element extends DiagnosticableTree implements BuildContext {
Map<Type, InheritedElement>? _inheritedWidgets;
@override InheritedElement? getElementForInheritedWidgetOfExactType<T extends InheritedWidget>() { assert(_debugCheckStateIsActiveForAncestorLookup()); final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T]; return ancestor; } ...}
复制代码
abstract class ComponentElement extends Element { @mustCallSuper void mount(Element? parent, dynamic newSlot) { ... _updateInheritance(); } void _updateInheritance() { assert(_lifecycleState == _ElementLifecycle.active); _inheritedWidgets = _parent?._inheritedWidgets; } ...}
abstract class ProxyElement extends ComponentElement { ...}
class InheritedElement extends ProxyElement { InheritedElement(InheritedWidget widget) : super(widget);
@override void _updateInheritance() { assert(_lifecycleState == _ElementLifecycle.active); final Map<Type, InheritedElement>? incomingWidgets = _parent?._inheritedWidgets; if (incomingWidgets != null) _inheritedWidgets = HashMap<Type, InheritedElement>.from(incomingWidgets); else _inheritedWidgets = HashMap<Type, InheritedElement>(); _inheritedWidgets![widget.runtimeType] = this; }}
复制代码
整体上逻辑还是比较清晰
遇到某个节点为 InheritedWidget 时，会将父节点的 _inheritedWidgets 变量给 incomingWidgets 这个临时变量
incomingWidgets 为空：为父类 Element 的 _inheritedWidgets 变量， 实例了一个 map 对象
incomingWidgets 不为空：将父节点_inheritedWidgets 所有数据深拷贝，返回一个全新的 Map 实例（含有父节点 _inheritedWidgets 所有数据），赋值给父类 Element 的 _inheritedWidgets 变量
将自身实例赋值给父类 Element 的 _inheritedWidgets 变量，key 为其 widget 的 runtimeType
为什么任何一个 Widget 的 Element 实例的 _inheritedWidgets 变量，可直接拿到父节点 InheritedElement 实例？
abstract class Element extends DiagnosticableTree implements BuildContext {
Map<Type, InheritedElement>? _inheritedWidgets;
void _updateInheritance() { assert(_lifecycleState == _ElementLifecycle.active); _inheritedWidgets = _parent?._inheritedWidgets; }
...}
复制代码
刷新机制
InheritedElement 和 Element 之间有一些交互，实际上自带了一套刷新机制
class InheritedElement extends ProxyElement { InheritedElement(InheritedWidget widget) : super(widget);
final Map<Element, Object?> _dependents = HashMap<Element, Object?>();
@protected void setDependencies(Element dependent, Object? value) { _dependents[dependent] = value; }
@protected void updateDependencies(Element dependent, Object? aspect) { setDependencies(dependent, null); }}
复制代码
InheritedElement 刷新子 Element
notifyClients 这个方法就是将 _dependents 存储的 Element，全部拿了出来，传入 notifyDependent
在 notifyDependent 方法中，传入 Element 调用了自身 didChangeDependencies()方法
Element 的 didChangeDependencies() 方法会调用 markNeedsBuild() ，来刷新自身
class InheritedElement extends ProxyElement { InheritedElement(InheritedWidget widget) : super(widget);
final Map<Element, Object?> _dependents = HashMap<Element, Object?>();
@protected void notifyDependent(covariant InheritedWidget oldWidget, Element dependent) { dependent.didChangeDependencies(); } @override void notifyClients(InheritedWidget oldWidget) { for (final Element dependent in _dependents.keys) { ... notifyDependent(oldWidget, dependent); } }}
abstract class Element extends DiagnosticableTree implements BuildContext { ... @mustCallSuper void didChangeDependencies() { assert(_lifecycleState == _ElementLifecycle.active); // otherwise markNeedsBuild is a no-op assert(_debugCheckOwnerBuildTargetExists('didChangeDependencies')); markNeedsBuild(); } ...}
复制代码
InheritedWidget 的子节点是怎么将自身 Element
添加到 InheritedElement 的_dependents 变量里的呢？
Element 里面有个 dependOnInheritedElement 方法
Element 中 dependOnInheritedElement 方法，会传入 InheritedElement 实例 ancestor
ancestor 调用 updateDependencies 方法，将自身的 Element 实例传入
InheritedElement 中就将这个 Element，添加到_dependents 变量中了
abstract class Element extends DiagnosticableTree implements BuildContext { ... @override InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object? aspect }) { assert(ancestor != null); _dependencies ??= HashSet<InheritedElement>(); _dependencies!.add(ancestor); ancestor.updateDependencies(this, aspect); return ancestor.widget; } ...}
class InheritedElement extends ProxyElement { InheritedElement(InheritedWidget widget) : super(widget);
final Map<Element, Object?> _dependents = HashMap<Element, Object?>();
@protected void setDependencies(Element dependent, Object? value) { _dependents[dependent] = value; }
@protected void updateDependencies(Element dependent, Object? aspect) { setDependencies(dependent, null); }}
复制代码
dependOnInheritedElement 该方法的使用也很简单
一般来说在某个 Widget 使用 getElementForInheritedWidgetOfExactType 获取父节点的 InheritedElement
然后将其传入 dependOnInheritedElement 方法中即可
// 举例var inheritedElement = context .getElementForInheritedWidgetOfExactType<ChangeNotifierEasyP<T>>() as EasyPInheritedElement<T>?;context.dependOnInheritedElement(inheritedElement);
复制代码
Provider 核心原理，就是采用了 InheritedWidget 这种刷新机制
想详细了解 Provider 相关原理，可参考下面文章
图示
路由小知识
大家在使用 InheritedWidget 获取数据的时候，或许有过这样一种困扰：A 页面 ---> B 页面 ---> C 页面
如果我在 A 页面使用 InheritedWidget 储存了数据，跳转到 B 页面或者 C 页面，会发现使用 context 获取不到 A 页面的 InheritedElement
这侧面证明了 Navigator 路由跳转：A 页面跳转 B 页面，B 页面并不是 A 页面的子节点
这里我画了下大致结构，如有偏差，请务必指出来，我会尽快修改
关于 Flutter 路由原理解析，可参考此文章（作者为啥现在不更文了呢 ~~）：Flutter 路由原理解析
思考
InheritedWidget 为我们带了很多便利
可以在一个 Widget 树范围，获取到我们想要 InheritedElement（通过泛型区分即可）
InheritedElement 和 Element 各种交互，也实现了一套极其简洁的刷新机制
进行一些深度封装，甚至可以无缝的管理很多控件的资源释放
但是，Element 提供的获取 InheritedElement 的方式，终究和路由机制无法很好的结合；这也模块设计无法避免的事情，或许某些模块设计的最优解，很难顾忌到其它模快的一些机制
InheritedWidget 这把神兵利器，在我们学习 Flutter 历程中给予了很多帮助
大部分的状态管理框架，将界面层和逻辑层分开，都是逻辑层来处理界面的刷新；逻辑层可以交给 InheritedWidget 存储管理；说明，我们自己也一定可以存储管理！
这也是 GetX 中一个核心思想，这并不是一个多么新颖或高深技术，但是，我这觉得这是一种思维上的突破，可以带来更多的可能
依赖注入
说明
依赖注入有如下实现方式（维基百科）：
基于接口。实现特定接口以供外部容器注入所依赖类型的对象。
基于 set 方法。实现特定属性的 public set 方法，来让外部容器调用传入所依赖类型的对象。
基于构造函数。实现特定参数的构造函数，在新建对象时传入所依赖类型的对象。
基于注解。基于Java的注解功能，在私有变量前加“@Autowired”等注解，不需要显式的定义以上三种代码，便可以让外部容器传入对应的对象。该方案相当于定义了 public 的 set 方法，但是因为没有真正的 set 方法，从而不会为了实现依赖注入导致暴露了不该暴露的接口（因为 set 方法只想让容器访问来注入而并不希望其他依赖此类的对象访问）。
强耦合类型的，基于构造函数
class Test { String msg;
Test(String msg) { this.msg = msg; }}
复制代码
set 方式
class Test { String? _msg;
void setMsg(String msg) { this._msg = msg; }}
复制代码
如果在 Java 中，图一时方便，直接在构造函数里面传值，然后需要的值越来越多，导致需要增加该构造函数传参，因为强耦合很多类，一改构造函数，爆红一大片（Dart 构造函数可选参数的特性，就没有这类问题了）
Put
来看下 GetX 注入的操作
var controller = Get.put(XxxGetxController());
复制代码
class _GetImpl extends GetInterface {}
final Get = _GetImpl();
extension Inst on GetInterface { S put<S>(S dependency, {String? tag, bool permanent = false, InstanceBuilderCallback<S>? builder}) => GetInstance().put<S>(dependency, tag: tag, permanent: permanent);}
复制代码
主要的逻辑看来还是 GetInstance 中
大家可以看看这地方单例的实现，我发现很多源码都用这种方式写的，非常简洁
全局的数据都是存在 _singl 中，这是个 Map
key：对象的 runtimeType 或者类的 Type + tag
value：_InstanceBuilderFactory 类，我们传入 dependedt 对象会存入这个类中
_singl 这个 map 存值的时候，不是用的 put，而是用的 putIfAbsent
如果 map 中有 key 和传入 key 相同的数据，传入的数据将不会被存储
也就是说相同类实例的对象，传入并不会被覆盖，只会存储第一条数据，后续被放弃
最后使用 find 方法，返回传入的实例
class GetInstance { factory GetInstance() => _getInstance ??= GetInstance._();
const GetInstance._();
static GetInstance? _getInstance;
static final Map<String, _InstanceBuilderFactory> _singl = {};
S put<S>( S dependency, { String? tag, bool permanent = false, @deprecated InstanceBuilderCallback<S>? builder, }) { _insert( isSingleton: true, name: tag, permanent: permanent, builder: builder ?? (() => dependency)); return find<S>(tag: tag); }
void _insert<S>({ bool? isSingleton, String? name, bool permanent = false, required InstanceBuilderCallback<S> builder, bool fenix = false, }) { final key = _getKey(S, name); _singl.putIfAbsent( key, () => _InstanceBuilderFactory<S>( isSingleton, builder, permanent, false, fenix, name, ), ); } String _getKey(Type type, String? name) { return name == null ? type.toString() : type.toString() + name; } S find<S>({String? tag}) { final key = _getKey(S, tag); if (isRegistered<S>(tag: tag)) { if (_singl[key] == null) { if (tag == null) { throw 'Class "$S" is not registered'; } else { throw 'Class "$S" with tag "$tag" is not registered'; } } final i = _initDependencies<S>(name: tag); return i ?? _singl[key]!.getDependency() as S; } else { // ignore: lines_longer_than_80_chars throw '"$S" not found. You need to call "Get.put($S())" or "Get.lazyPut(()=>$S())"'; } }}
复制代码
find
S find<S>({String? tag}) => GetInstance().find<S>(tag: tag);
复制代码
class GetInstance { factory GetInstance() => _getInstance ??= GetInstance._();
const GetInstance._();
static GetInstance? _getInstance;
static final Map<String, _InstanceBuilderFactory> _singl = {}; String _getKey(Type type, String? name) { return name == null ? type.toString() : type.toString() + name; } bool isRegistered<S>({String? tag}) => _singl.containsKey(_getKey(S, tag)); S find<S>({String? tag}) { final key = _getKey(S, tag); if (isRegistered<S>(tag: tag)) { if (_singl[key] == null) { if (tag == null) { throw 'Class "$S" is not registered'; } else { throw 'Class "$S" with tag "$tag" is not registered'; } } final i = _initDependencies<S>(name: tag); return i ?? _singl[key]!.getDependency() as S; } else { // ignore: lines_longer_than_80_chars throw '"$S" not found. You need to call "Get.put($S())" or "Get.lazyPut(()=>$S())"'; } }}
复制代码
GetBuilder 刷新机制
使用
为了知识的连续性，此处简单的写下使用
class GetCounterEasyLogic extends GetxController { var count = 0;
void increase() { ++count; update(); }}
复制代码
class GetCounterEasyPage extends StatelessWidget { final GetCounterEasyLogic logic = Get.put(GetCounterEasyLogic());
@override Widget build(BuildContext context) { return BaseScaffold( appBar: AppBar(title: const Text('计数器-简单式')), body: Center( child: GetBuilder<GetCounterEasyLogic>(builder: (logic) { return Text( '点击了 ${logic.count} 次', style: TextStyle(fontSize: 30.0), ); }), ), floatingActionButton: FloatingActionButton( onPressed: () => logic.increase(), child: Icon(Icons.add), ), ); }}
复制代码
GetBuilder
有一天，我躺在床上思考
Obx 的状态管理，GetXController 实例回收是放在路由里面，在很多场景下，存在一些局限性
后来我想到，GetBuilder 使用带泛型，这就能拿到 GetxController 实例，GetBuilder 又是 StatefulWidget
这样就可以使用它来回收实例，能解决很多场景下，GetXController 实例无法回收的问题（不使用 Getx 路由）
我兴致冲冲的打开 Getx 项目，准备提 PR，然后发现 GetBuilder 已经在 dispose 里面写了回收实例的操作
淦！
内置回收机制
class GetBuilder<T extends GetxController> extends StatefulWidget { final GetControllerBuilder<T> builder; final bool global; final String? tag; final bool autoRemove; final T? init;
const GetBuilder({ Key? key, this.init, this.global = true, required this.builder, this.autoRemove = true, this.initState, this.tag, }) : super(key: key);
@override GetBuilderState<T> createState() => GetBuilderState<T>();}
class GetBuilderState<T extends GetxController> extends State<GetBuilder<T>> with GetStateUpdaterMixin { T? controller; bool? _isCreator = false; VoidCallback? _remove; Object? _filter;
@override void initState() { super.initState(); widget.initState?.call(this);
var isRegistered = GetInstance().isRegistered<T>(tag: widget.tag);
if (widget.global) { if (isRegistered) { controller = GetInstance().find<T>(tag: widget.tag); } else { controller = widget.init; GetInstance().put<T>(controller!, tag: widget.tag); } } else { controller = widget.init; controller?.onStart(); }
}
@override void dispose() { super.dispose(); widget.dispose?.call(this); if (_isCreator! || widget.assignId) { if (widget.autoRemove && GetInstance().isRegistered<T>(tag: widget.tag)) { GetInstance().delete<T>(tag: widget.tag); } }
_remove?.call();
controller = null; _isCreator = null; _remove = null; _filter = null; }
@override Widget build(BuildContext context) { return widget.builder(controller!); }}
复制代码
代码里的逻辑还是相当清晰的，initState 获取实例，dispose 回收实例
通过 GetBuilder 上泛型获取相应 GetXController 实例
不存在：使用 init 传入的实例
存在：直接使用；init 传入的实例无效
autoRemove 可以控制是否自动回收 GetXController 实例
默认为 true：默认开启自动回收
true：开启自动回收 false：关闭自动回收
刷新逻辑
mixin GetStateUpdaterMixin<T extends StatefulWidget> on State<T> { void getUpdate() { if (mounted) setState(() {}); }}
class GetBuilder<T extends GetxController> extends StatefulWidget { final GetControllerBuilder<T> builder; final bool global; final T? init; final Object? id; const GetBuilder({ Key? key, this.init, this.id, this.global = true, required this.builder, }) : super(key: key);
@override GetBuilderState<T> createState() => GetBuilderState<T>();}
class GetBuilderState<T extends GetxController> extends State<GetBuilder<T>> with GetStateUpdaterMixin { T? controller;
@override void initState() { super.initState(); ... if (widget.global) { if (isRegistered) { controller = GetInstance().find<T>(tag: widget.tag); } else { controller = widget.init; GetInstance().put<T>(controller!, tag: widget.tag); } } else { controller = widget.init; controller?.onStart(); }
_subscribeToController(); }
void _subscribeToController() { _remove?.call(); _remove = (widget.id == null) ? controller?.addListener( _filter != null ? _filterUpdate : getUpdate, ) : controller?.addListenerId( widget.id, _filter != null ? _filterUpdate : getUpdate, ); }
void _filterUpdate() { var newFilter = widget.filter!(controller!); if (newFilter != _filter) { _filter = newFilter; getUpdate(); } }
@override void didChangeDependencies() { super.didChangeDependencies(); widget.didChangeDependencies?.call(this); }
@override void didUpdateWidget(GetBuilder oldWidget) { super.didUpdateWidget(oldWidget as GetBuilder<T>); if (oldWidget.id != widget.id) { _subscribeToController(); } widget.didUpdateWidget?.call(oldWidget, this); }
@override Widget build(BuildContext context) { return widget.builder(controller!); }}
复制代码
关键步骤
通过泛型获取注入的 GetXController 实例
添加监听代码
addListener：添加监听回调
addListenerId：添加监听回调，必须设置 id，update 刷新的时候也必须写上配套的 id
监听代码：核心代码就是 getUpdate 方法，方法在 GetStateUpdaterMixin 中
getUpdate()逻辑就是 setState()，刷新当前 GetBuilder
图示
Update
触发逻辑还是很简单的，使用 update 即可
Ids：和上面的 Getbuilder 对应起来了，可刷新对应设置 id 的 GetBuilder
condition：是否刷新一个判断条件，默认为 true（假设必须某个 id 大于 3 才能刷新：update([1, 2, 3, 4], index > 3) ）
abstract class GetxController extends DisposableInterface with ListNotifier { void update([List<Object>? ids, bool condition = true]) { if (!condition) { return; } if (ids == null) { refresh(); } else { for (final id in ids) { refreshGroup(id); } } }}
复制代码
看下关键方法 refresh()，在 ListNotifier 类中
可以发现，_updaters 中泛型就是一个方法
在 GetBuilder 中添加的监听就是一个方法参数，方法体里面就是 setState()
齐活了！GetBuilder 添加方法（方法体是 setState），update 遍历触发所有添加方法
typedef GetStateUpdate = void Function();class ListNotifier implements Listenable { List<GetStateUpdate?>? _updaters = <GetStateUpdate?>[];
HashMap<Object?, List<GetStateUpdate>>? _updatersGroupIds = HashMap<Object?, List<GetStateUpdate>>();
@protected void refresh() { assert(_debugAssertNotDisposed()); _notifyUpdate(); }
void _notifyUpdate() { for (var element in _updaters!) { element!(); } }
...}
复制代码
abstract class GetxController extends DisposableInterface with ListNotifier { void update([List<Object>? ids, bool condition = true]) { if (!condition) { return; } if (ids == null) { refresh(); } else { for (final id in ids) { refreshGroup(id); } } }}
class ListNotifier implements Listenable { HashMap<Object?, List<GetStateUpdate>>? _updatersGroupIds = HashMap<Object?, List<GetStateUpdate>>();
void _notifyIdUpdate(Object id) { if (_updatersGroupIds!.containsKey(id)) { final listGroup = _updatersGroupIds![id]!; for (var item in listGroup) { item(); } } }
@protected void refreshGroup(Object id) { assert(_debugAssertNotDisposed()); _notifyIdUpdate(id); }}
复制代码
总结
Obx 刷新机制
这套刷新机制，和我们常用的状态管理框架（provider，bloc）以及上面的 GetBuilder，在使用上有一些区别
变量上：基础类型，实体以及列表之类的数据类型，作者都封装了一套 Rx 类型，快捷在数据后加 obs
例如：RxString msg = "test".obs（var msg = "test".obs）
更新上：基础类型直接更新数据就行，实体需要以 .update() 的形式
使用上：使用这类变量，一般要加上 .value ，作者也给出一个快捷方式变量后面加个 ()
我不太推荐加 () 的形式，对后续维护项目人太不友好了
Obx 刷新机制，最有趣应该就是变量改变后，包裹该变量的 Obx 会自动刷新！注意喔，仅仅是包裹该变量的 Obx 会刷新！其它的 Obx 并不会刷新。
这是怎么做到的呢？
使用
简单的来看下使用
class GetCounterRxLogic extends GetxController { var count = 0.obs;
///自增 void increase() => ++count;}
复制代码
class GetCounterRxPage extends StatelessWidget { final GetCounterRxLogic logic = Get.put(GetCounterRxLogic());
@override Widget build(BuildContext context) { return BaseScaffold( appBar: AppBar(title: const Text('计数器-响应式')), body: Center( child: Obx(() { return Text( '点击了 ${logic.count.value} 次', style: TextStyle(fontSize: 30.0), ); }), ), floatingActionButton: FloatingActionButton( onPressed: () => logic.increase(), child: Icon(Icons.add), ), ); }}
复制代码
Rx 类变量
此处以 RxInt 为例，来看下其内部实现
extension IntExtension on int { /// Returns a `RxInt` with [this] `int` as initial value. RxInt get obs => RxInt(this);}
复制代码
class RxInt extends Rx<int> { RxInt(int initial) : super(initial);
/// Addition operator. RxInt operator +(int other) { value = value + other; return this; }
/// Subtraction operator. RxInt operator -(int other) { value = value - other; return this; }}
复制代码
class Rx<T> extends _RxImpl<T> { Rx(T initial) : super(initial);
@override dynamic toJson() { try { return (value as dynamic)?.toJson(); } on Exception catch (_) { throw '$T has not method [toJson]'; } }}
复制代码
_RxImpl<T> 类继承了 RxNotifier<T> 和 with 了 RxObjectMixin<T>
这个类内容是比较庞大的，主要是 RxNotifier<T> 和 RxObjectMixin<T> 内容很多
代码很多，先展示下完整代码；在下一个说明处会进行简化
abstract class _RxImpl<T> extends RxNotifier<T> with RxObjectMixin<T> { _RxImpl(T initial) { _value = initial; }
void addError(Object error, [StackTrace? stackTrace]) { subject.addError(error, stackTrace); }
Stream<R> map<R>(R mapper(T? data)) => stream.map(mapper);
void update(void fn(T? val)) { fn(_value); subject.add(_value); }
void trigger(T v) { var firstRebuild = this.firstRebuild; value = v; if (!firstRebuild) { subject.add(v); } }}
class RxNotifier<T> = RxInterface<T> with NotifyManager<T>;
mixin NotifyManager<T> { GetStream<T> subject = GetStream<T>(); final _subscriptions = <GetStream, List<StreamSubscription>>{};
bool get canUpdate => _subscriptions.isNotEmpty;
void addListener(GetStream<T> rxGetx) { if (!_subscriptions.containsKey(rxGetx)) { final subs = rxGetx.listen((data) { if (!subject.isClosed) subject.add(data); }); final listSubscriptions = _subscriptions[rxGetx] ??= <StreamSubscription>[]; listSubscriptions.add(subs); } }
StreamSubscription<T> listen( void Function(T) onData, { Function? onError, void Function()? onDone, bool? cancelOnError, }) => subject.listen( onData, onError: onError, onDone: onDone, cancelOnError: cancelOnError ?? false, );
void close() { _subscriptions.forEach((getStream, _subscriptions) { for (final subscription in _subscriptions) { subscription.cancel(); } });
_subscriptions.clear(); subject.close(); }}
mixin RxObjectMixin<T> on NotifyManager<T> { late T _value;
void refresh() { subject.add(value); }
T call([T? v]) { if (v != null) { value = v; } return value; }
bool firstRebuild = true;
String get string => value.toString();
@override String toString() => value.toString();
dynamic toJson() => value;
@override bool operator ==(dynamic o) { if (o is T) return value == o; if (o is RxObjectMixin<T>) return value == o.value; return false; }
@override int get hashCode => _value.hashCode;
set value(T val) { if (subject.isClosed) return; if (_value == val && !firstRebuild) return; firstRebuild = false; _value = val;
subject.add(_value); }
T get value { if (RxInterface.proxy != null) { RxInterface.proxy!.addListener(subject); } return _value; }
Stream<T?> get stream => subject.stream;
void bindStream(Stream<T> stream) { final listSubscriptions = _subscriptions[subject] ??= <StreamSubscription>[]; listSubscriptions.add(stream.listen((va) => value = va)); }}
复制代码
简化 _RxImpl<T>，上面内容太多了，我这地方简化下，把需要关注的内容展示出来：此处有几个需要重点关注的点
RxInt 是一个内置 callback 的数据类型（GetStream）
RxInt 的 value 变量改变的时候（set value），会触发 subject.add(_value)，内部逻辑是自动刷新操作
获取 RxInt 的 value 变量的时候（get value），会有一个添加监听的操作，这个灰常重要！
abstract class _RxImpl<T> extends RxNotifier<T> with RxObjectMixin<T> {
void update(void fn(T? val)) { fn(_value); subject.add(_value); }}
class RxNotifier<T> = RxInterface<T> with NotifyManager<T>;
mixin NotifyManager<T> { GetStream<T> subject = GetStream<T>(); final _subscriptions = <GetStream, List<StreamSubscription>>{};
bool get canUpdate => _subscriptions.isNotEmpty;
void addListener(GetStream<T> rxGetx) { if (!_subscriptions.containsKey(rxGetx)) { final subs = rxGetx.listen((data) { if (!subject.isClosed) subject.add(data); }); final listSubscriptions = _subscriptions[rxGetx] ??= <StreamSubscription>[]; listSubscriptions.add(subs); } }}
mixin RxObjectMixin<T> on NotifyManager<T> { late T _value;
void refresh() { subject.add(value); }
set value(T val) { if (subject.isClosed) return; if (_value == val && !firstRebuild) return; firstRebuild = false; _value = val;
subject.add(_value); }
T get value { if (RxInterface.proxy != null) { RxInterface.proxy!.addListener(subject); } return _value; }}
复制代码
为啥 GetStream 的 add 会有刷新操作：删了很多代码，保留了重点代码
调用 add 方法时候，会调用 _notifyData 方法
_notifyData 方法中，会遍历 _onData 列表，根据条件会执行其泛型的 _data 的方法
我猜，_data 中的方法体，十有八九在某个地方肯定添加了 setState()
class GetStream<T> { GetStream({this.onListen, this.onPause, this.onResume, this.onCancel}); List<LightSubscription<T>>? _onData = <LightSubscription<T>>[];
FutureOr<void> addSubscription(LightSubscription<T> subs) async { if (!_isBusy!) { return _onData!.add(subs); } else { await Future.delayed(Duration.zero); return _onData!.add(subs); } }
void _notifyData(T data) { _isBusy = true; for (final item in _onData!) { if (!item.isPaused) { item._data?.call(data); } } _isBusy = false; }
T? _value;
T? get value => _value;
void add(T event) { assert(!isClosed, 'You cannot add event to closed Stream'); _value = event; _notifyData(event); }}
typedef OnData<T> = void Function(T data);
class LightSubscription<T> extends StreamSubscription<T> { OnData<T>? _data;}
复制代码
图示，先来看下，Rx 类具有的功能
get value 添加监听
set value 执行已添加的监听
Obx 刷新机制
Obx 最大的特殊之处，应该就是使用它的时候，不需要加泛型且能自动刷新，这是怎么做到的呢？
class Obx extends ObxWidget { final WidgetCallback builder;
const Obx(this.builder);
@override Widget build() => builder();}
abstract class ObxWidget extends StatefulWidget { const ObxWidget({Key? key}) : super(key: key);
@override _ObxState createState() => _ObxState();
@protected Widget build();}
class _ObxState extends State<ObxWidget> { RxInterface? _observer; late StreamSubscription subs;
_ObxState() { _observer = RxNotifier(); }
@override void initState() { subs = _observer!.listen(_updateTree, cancelOnError: false); super.initState(); }
void _updateTree(_) { if (mounted) { setState(() {}); } }
@override void dispose() { subs.cancel(); _observer!.close(); super.dispose(); }
Widget get notifyChilds { final observer = RxInterface.proxy; RxInterface.proxy = _observer; final result = widget.build(); if (!_observer!.canUpdate) { throw """ [Get] the improper use of a GetX has been detected. You should only use GetX or Obx for the specific widget that will be updated. If you are seeing this error, you probably did not insert any observable variables into GetX/Obx or insert them outside the scope that GetX considers suitable for an update (example: GetX => HeavyWidget => variableObservable). If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX. """; } RxInterface.proxy = observer; return result; }
@override Widget build(BuildContext context) => notifyChilds;}
复制代码
添加监听
一个控件想刷新，肯定有添加监听的逻辑，再在某个地方手动触发
看下_ObxState 类在哪添加监听：只展示监听添加的代码
_ObxState 初始化的时候，会实例化一个 RxNotifier() 对象，使用 _observer 变量接受：这个操作很重要
initState 中做了一个比较关键的操作，_observer 的 listener 方法中，将 _updateTree 方法传进去了，这个方法中的逻辑体就是 setState()
class _ObxState extends State<ObxWidget> { RxInterface? _observer; late StreamSubscription subs;
_ObxState() { _observer = RxNotifier(); }
@override void initState() { subs = _observer!.listen(_updateTree, cancelOnError: false); super.initState(); }
void _updateTree(_) { if (mounted) { setState(() {}); } }}
复制代码
上述很多逻辑和 RxNotifier 类相关，来看下这个类
RxNotifier 这个类，内部会实例一个 GetStream<T>() 对象，然后赋值给 subject
上面赋值 _updateTree 方法被传入的 GetStream<T>() 类中，最终添加 _onData 该列表变量中
瞟一眼 _notifyData 方法，是不是遍历执行了 _onData 列表中 item 的方法（ item. _data?.call(data) ）
class RxNotifier<T> = RxInterface<T> with NotifyManager<T>;
mixin NotifyManager<T> { GetStream<T> subject = GetStream<T>(); final _subscriptions = <GetStream, List<StreamSubscription>>{};
bool get canUpdate => _subscriptions.isNotEmpty;
StreamSubscription<T> listen( void Function(T) onData, { Function? onError, void Function()? onDone, bool? cancelOnError, }) => subject.listen( onData, onError: onError, onDone: onDone, cancelOnError: cancelOnError ?? false, );}
class GetStream<T> { void Function()? onListen; void Function()? onPause; void Function()? onResume; FutureOr<void> Function()? onCancel;
GetStream({this.onListen, this.onPause, this.onResume, this.onCancel}); List<LightSubscription<T>>? _onData = <LightSubscription<T>>[];
FutureOr<void> addSubscription(LightSubscription<T> subs) async { if (!_isBusy!) { return _onData!.add(subs); } else { await Future.delayed(Duration.zero); return _onData!.add(subs); } }
int? get length => _onData?.length;
bool get hasListeners => _onData!.isNotEmpty; void _notifyData(T data) { _isBusy = true; for (final item in _onData!) { if (!item.isPaused) { item._data?.call(data); } } _isBusy = false; }
LightSubscription<T> listen(void Function(T event) onData, {Function? onError, void Function()? onDone, bool? cancelOnError}) { final subs = LightSubscription<T>( removeSubscription, onPause: onPause, onResume: onResume, onCancel: onCancel, ) ..onData(onData) ..onError(onError) ..onDone(onDone) ..cancelOnError = cancelOnError; addSubscription(subs); onListen?.call(); return subs; }}
复制代码
监听转移
在_ObxState 类中做了一个很重要，监听对象转移的操作
_observer 中的对象已经拿到了 Obx 控件内部的 setState 方法，现在需要将它转移出去啦！
`class _ObxState extends State<ObxWidget> { RxInterface? _observer;
_ObxState() { _observer = RxNotifier(); }
Widget get notifyChilds { final observer = RxInterface.proxy; RxInterface.proxy = _observer; final result = widget.build(); if (!_observer!.canUpdate) { throw """ [Get] the improper use of a GetX has been detected. You should only use GetX or Obx for the specific widget that will be updated. If you are seeing this error, you probably did not insert any observable variables into GetX/Obx or insert them outside the scope that GetX considers suitable for an update (example: GetX => HeavyWidget => variableObservable). If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX. """; } RxInterface.proxy = observer; return result; }
@override Widget build(BuildContext context) => notifyChilds;}
abstract class RxInterface<T> { bool get canUpdate;
void addListener(GetStream<T> rxGetx);
void close();
static RxInterface? proxy;
StreamSubscription<T> listen(void Function(T event) onData, {Function? onError, void Function()? onDone, bool? cancelOnError});}
复制代码
notifyChilds 中的几行代码都有深意，一行行的解读下
final observer = RxInterface.proxy：RxInterface.proxy 正常情况为空，但是，可能作为中间变量暂存对象的情况，现在暂时将他的对象取出来，存在 observer 变量中
RxInterface.proxy = _observer：将我们在 _ObxState 类中实例化的 RxNotifier() 对象的地址，赋值给了 RxInterface.proxy
注意：这里，RxInterface.proxy 中 RxNotifier() 实例，有当前 Obx 控件的 setState() 方法
final result = widget.build()：这个赋值相当重要了！调用我们在外部传进的 Widget
如果这个 Widget 中有响应式变量，那么一定会调用该变量中获取 get value
还记得 get value 的代码吗？
mixin RxObjectMixin<T> on NotifyManager<T> { late T _value; T get value { if (RxInterface.proxy != null) { RxInterface.proxy!.addListener(subject); } return _value; } } mixin NotifyManager<T> { GetStream<T> subject = GetStream<T>(); }
复制代码
mixin NotifyManager<T> { GetStream<T> subject = GetStream<T>(); final _subscriptions = <GetStream, List<StreamSubscription>>{}; bool get canUpdate => _subscriptions.isNotEmpty; void addListener(GetStream<T> rxGetx) { if (!_subscriptions.containsKey(rxGetx)) { //重点 GetStream中listen方法是用来添加监听方法的，add的时候会刷新监听方法 final subs = rxGetx.listen((data) { if (!subject.isClosed) subject.add(data); }); final listSubscriptions = _subscriptions[rxGetx] ??= <StreamSubscription>[]; listSubscriptions.add(subs); } } }
复制代码
if (!_observer!.canUpdate) {}：这个判断就很简单了，如果我们传入的 Widget 中没有 Rx 类型变量， _subscriptions 数组就会为空，这个判断就会过不了
RxInterface.proxy = observer：将 RxInterface.proxy 中原来的值，重新赋给自己，至此 _ObxState 中的 _observer 对象地址，进行了一番奇幻旅游后，结束了自己的使命
图示
总结
Obx 的刷新机制，还是蛮有有趣的
但是，我认为 Obx 刷新机制，也是有着自身的缺陷的，从其实现原理上看，这是无法避免的
因为 Obx 的自动刷新，必须需要每一个变量都自带监听触发机制；所以，所有的基础类型，实体以及列表，都需要重新封装，这会造成很严重的使用影响：变量的赋值，类型标定，刷新都很正常写法有差异，不熟悉该写法的人，看了后，会很难受
因为对所有类型重新封装，经过上面的代码回溯，大家也发现，封装类型的代码相当多；封装类型占用资源肯定要比 dart 自带类型的大（这个问题可以避免：封装一个响应式的变量，并不一定需要很多代码，下面我给出了一个封装参考）
手搓一个状态管理框架
GetX 内置了俩套状态管理机制，这边也会按照其刷新机制，手搓俩套出来
我会用极其简单的代码，再现俩套经典的机制
依赖注入
///依赖注入，外部可将实例，注入该类中，由该类管理class Easy { ///注入实例 static T put<T>(T dependency, {String? tag}) => _EasyInstance().put(dependency, tag: tag);
///获取注入的实例 static T find<T>({String? tag, String? key}) => _EasyInstance().find<T>(tag: tag, key: key);
///删除实例 static bool delete<T>({String? tag, String? key}) => _EasyInstance().delete<T>(tag: tag, key: key);}
///具体逻辑class _EasyInstance { factory _EasyInstance() => _instance ??= _EasyInstance._();
static _EasyInstance? _instance;
_EasyInstance._();
static final Map<String, _InstanceInfo> _single = {};
///注入实例 T put<T>(T dependency, {String? tag}) { final key = _getKey(T, tag); //多次注入会覆盖 _single[key] = _InstanceInfo<T>(dependency); return find<T>(tag: tag); }
///获取注入的实例 T find<T>({String? tag, String? key}) { final newKey = key ?? _getKey(T, tag); var info = _single[newKey];
if (info?.value != null) { return info!.value; } else { throw '"$T" not found. You need to call "Easy.put($T())""'; } }
///删除实例 bool delete<T>({String? tag, String? key}) { final newKey = key ?? _getKey(T, tag); if (!_single.containsKey(newKey)) { print('Instance "$newKey" already removed.'); return false; }
_single.remove(newKey); print('Instance "$newKey" deleted.'); return true; }
String _getKey(Type type, String? name) { return name == null ? type.toString() : type.toString() + name; }}
class _InstanceInfo<T> { _InstanceInfo(this.value);
T value;}
复制代码
///自定义个监听触发类class EasyXNotifier { List<VoidCallback> _listeners = [];
void addListener(VoidCallback listener) { _listeners.add(listener); }
void removeListener(VoidCallback listener) { for (final entry in _listeners) { if (entry == listener) { _listeners.remove(entry); return; } } }
void dispose() { _listeners.clear(); }
void notify() { if (_listeners.isEmpty) return;
for (final entry in _listeners) { try { entry.call(); } catch (e) { print(e.toString()); } } }}
复制代码
EasyBuilder
实现
class EasyXController { EasyXNotifier xNotifier = EasyXNotifier();
///刷新控件 void update() { xNotifier.notify(); }}
复制代码
///刷新控件,自带回收机制class EasyBuilder<T extends EasyXController> extends StatefulWidget { final Widget Function(T logic) builder;
final String? tag; final bool autoRemove;
const EasyBuilder({ Key? key, required this.builder, this.autoRemove = true, this.tag, }) : super(key: key);
@override _EasyBuilderState<T> createState() => _EasyBuilderState<T>();}
class _EasyBuilderState<T extends EasyXController> extends State<EasyBuilder<T>> { late T controller;
@override void initState() { super.initState();
controller = Easy.find<T>(tag: widget.tag); controller.xNotifier.addListener(() { if (mounted) setState(() {}); }); }
@override void dispose() { if (widget.autoRemove) { Easy.delete<T>(tag: widget.tag); } controller.xNotifier.dispose();
super.dispose(); }
@override Widget build(BuildContext context) { return widget.builder(controller); }}
复制代码
使用
class EasyXCounterLogic extends EasyXController { var count = 0;
void increase() { ++count; update(); }}
复制代码
class EasyXCounterPage extends StatelessWidget { final EasyXCounterLogic logic = Easy.put(EasyXCounterLogic());
@override Widget build(BuildContext context) { return BaseScaffold( appBar: AppBar(title: const Text('EasyX-自定义EasyBuilder刷新机制')), body: Center( child: EasyBuilder<EasyXCounterLogic>(builder: (logic) { return Text( '点击了 ${logic.count} 次', style: TextStyle(fontSize: 30.0), ); }), ), floatingActionButton: FloatingActionButton( onPressed: () => logic.increase(), child: Icon(Icons.add), ), ); }}
复制代码
Ebx：自动刷新机制
自动刷新机制，因为没加泛型，所以无法确定自己内部使用了哪个注入实例，Getx 中是在路由里面去回收这些实例的，但是，如果你没使用 GetX 的路由，又用 Obx，你会发现，GetXController 居然无法自动回收！！！
此处针对该场景，我会给出一种解决方案
实现
///拓展函数extension IntExtension on int { RxInt get ebs => RxInt(this);}
extension StringExtension on String { RxString get ebs => RxString(this);}
extension DoubleExtension on double { RxDouble get ebs => RxDouble(this);}
extension BoolExtension on bool { RxBool get ebs => RxBool(this);}
///封装各类型class RxInt extends Rx<int> { RxInt(int initial) : super(initial);
RxInt operator +(int other) { value = value + other; return this; }
RxInt operator -(int other) { value = value - other; return this; }}
class RxDouble extends Rx<double> { RxDouble(double initial) : super(initial);
RxDouble operator +(double other) { value = value + other; return this; }
RxDouble operator -(double other) { value = value - other; return this; }}
class RxString extends Rx<String> { RxString(String initial) : super(initial);}
class RxBool extends Rx<bool> { RxBool(bool initial) : super(initial);}
///主体逻辑class Rx<T> { EasyXNotifier subject = EasyXNotifier();
Rx(T initial) { _value = initial; }
late T _value;
bool firstRebuild = true;
String get string => value.toString();
@override String toString() => value.toString();
set value(T val) { if (_value == val && !firstRebuild) return; firstRebuild = false; _value = val;
subject.notify(); }
T get value { if (RxEasy.proxy != null) { RxEasy.proxy!.addListener(subject); } return _value; }}
复制代码
class RxEasy { EasyXNotifier easyXNotifier = EasyXNotifier();
Map<EasyXNotifier, String> _listenerMap = {};
bool get canUpdate => _listenerMap.isNotEmpty;
static RxEasy? proxy;
void addListener(EasyXNotifier notifier) { if (!_listenerMap.containsKey(notifier)) { //重要：将Ebx中的监听对象转换到此处 easyXNotifier = proxy!.easyXNotifier; //变量监听中刷新 notifier.addListener(() { //刷新ebx中添加的监听 easyXNotifier.notify(); }); //添加进入map中 _listenerMap[notifier] = ''; } }}
复制代码
typedef WidgetCallback = Widget Function();
class Ebx extends StatefulWidget { const Ebx(this.builder, {Key? key}) : super(key: key);
final WidgetCallback builder;
@override _EbxState createState() => _EbxState();}
class _EbxState extends State<Ebx> { RxEasy _rxEasy = RxEasy();
@override void initState() { super.initState();
_rxEasy.easyXNotifier.addListener(() { if (mounted) setState(() {}); }); }
Widget get notifyChild { final observer = RxEasy.proxy; RxEasy.proxy = _rxEasy; final result = widget.builder(); if (!_rxEasy.canUpdate) { throw 'Widget lacks Rx type variables'; } RxEasy.proxy = observer; return result; }
@override Widget build(BuildContext context) { return notifyChild; }
@override void dispose() { _rxEasy.easyXNotifier.dispose();
super.dispose(); }}
复制代码
class EasyBindWidget extends StatefulWidget { const EasyBindWidget({ Key? key, this.bind, this.tag, this.binds, this.tags, required this.child, }) : assert( binds == null || tags == null || binds.length == tags.length, 'The binds and tags arrays length should be equal\n' 'and the elements in the two arrays correspond one-to-one', ), super(key: key);
final Object? bind; final String? tag;
final List<Object>? binds; final List<String>? tags;
final Widget child;
@override _EasyBindWidgetState createState() => _EasyBindWidgetState();}
class _EasyBindWidgetState extends State<EasyBindWidget> { @override Widget build(BuildContext context) { return widget.child; }
@override void dispose() { _closeController(); _closeControllers();
super.dispose(); }
void _closeController() { if (widget.bind == null) { return; }
var key = widget.bind.runtimeType.toString() + (widget.tag ?? ''); Easy.delete(key: key); }
void _closeControllers() { if (widget.binds == null) { return; }
for (var i = 0; i < widget.binds!.length; i++) { var type = widget.binds![i].runtimeType.toString();
if (widget.tags == null) { Easy.delete(key: type); } else { var key = type + (widget.tags?[i] ?? ''); Easy.delete(key: key); } } }}
复制代码
使用
class EasyXEbxCounterLogic { RxInt count = 0.ebs;
///自增 void increase() => ++count;}
复制代码
class EasyXEbxCounterPage extends StatelessWidget { final EasyXEbxCounterLogic logic = Easy.put(EasyXEbxCounterLogic());
@override Widget build(BuildContext context) { return EasyBindWidget( bind: logic, child: BaseScaffold( appBar: AppBar(title: const Text('EasyX-自定义Ebx刷新机制')), body: Center( child: Ebx(() { return Text( '点击了 ${logic.count.value} 次', style: TextStyle(fontSize: 30.0), ); }), ), floatingActionButton: FloatingActionButton( onPressed: () => logic.increase(), child: Icon(Icons.add), ), ), ); }}
复制代码
总结
这俩种刷新模式，含金量高的，应该还是自动刷新的机制，思路很有趣，响应式变量和刷新控件通过静态变量的形式建立起联系，cool！又是一种骚操作！
这俩套状态管理机制，我都给出了对依赖注入对象，自动回收的解决方案，希望对大家的思路有所启迪。
最后
终于把最后一篇 GetX 的原理剖析写完了（只针对 GetX 状态管理这部分内容），了了一桩心事。。。
如果大家认真看完了整片文章，可能会发现：状态管理+依赖注入，可以使得使用场景大大的被拓展
整篇文章写下来，我觉得真的尽力了
从 InheritedWidget 到路由
然后到依赖注入
再就是俩种状态框架原理剖析
最后依据俩种刷新机制，手搓俩套状态管理框架
也算是层层递进的将其中的知识，一点点的展示在大家的面前，希望可以帮到各位！！！
系列文章 + 相关地址
评论