--- theme: cyanosis --- ![image-20210627221006498](https://raw.githubusercontent.com/xdd666t/MyData/master/pic/flutter/blog/20210714093026.png) # 前言 > **人心中的成见是一座大山，任你怎么努力都休想搬动。** 这是电影《哪吒》里申公豹说的一句话，也是贯彻整部电影的一个主题；或许这句话引起了太多人的共鸣：35岁职场危机，大厂卡本科学历，无房无车结婚难等等，所以，这句话也经常被人提起。同时，因为GetX作者的一些言论，也让一些成见一直伴随着GetX这个框架。 **我写这篇文章，并不是为GetX正名** - 我自问自己并不是任何一个状态框架的死忠者，Provider和Bloc，我写了相关使用、原理剖析文章和相关代码生成插件 - 在我心中，这类框架并没有多么神秘 - 因为对其原理较熟，上手使用是一件较为容易的事，所以切换相关框架没有多大的时间成本 - 所以，我无需去做一个卫道者 GetX整体设计，有不少优秀点思想，我希望将这些优秀设计思路展现给大家；或许会对你设计自己的框架有一些帮助，同时也是对自己思考历程的一个记录。 # 前置知识 > **在说GetX设计思想之前，需要先介绍几个知识，在Flutter茁壮发展的历程里，他们都留下了浓墨重彩的一笔** ## InheritedWidget **不得不说，这个控件真的是一个神奇控件，它就仿佛是一把神兵利器** - 宝刀屠龙，号令天下，莫敢不从，倚天不出，谁与争锋 - 倚天剑，剑藏《九阴真经》 - 屠龙刀，刀藏《降龙十八掌》、《武穆遗书》 **InheritedWidget这把神兵藏有什么？** - 依赖节点，数据传输 - 定点刷新机制 ### 数据传输 InheritedWidget是我们统称的一个控件名，精髓还是**InheritedElement**，InheritedWidget的数据传递，来看下存和取这俩个过程 > **存数据** - InheritedWidget存数据，是一个比较简单的操作，存储在InheritedElement中即可 ```dart 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 = '传输数据'; } ``` > **取数据** - 只要是 **TransferDataWidget（上面InheritedWidget的子类）** 的子节点，通过子节点的BuildContext（Element是BuildContext的实现类），都可以无缝的取数据 ```dart var transferDataElement = context.getElementForInheritedWidgetOfExactType() as TransferDataElement?; var msg = transferDataElement.value; ``` 可以发现，我们只需要通过Element的getElementForInheritedWidgetOfExactType方法，就可以拿到父节点的TransferDataElement实例（必须继承InheritedElement）拿到实例后，自然就可以很简单的拿到相应数据了 > **原理** - 可以发现我们是拿到了XxxInheritedElement实例，继而拿到了储存的值，所以关键在 **getElementForInheritedWidgetOfExactType()** 这个方法 - 代码很简单，就是从 _inheritedWidgets这个map里取值，泛型T是key ```dart abstract class Element extends DiagnosticableTree implements BuildContext { Map? _inheritedWidgets; @override InheritedElement? getElementForInheritedWidgetOfExactType() { assert(_debugCheckStateIsActiveForAncestorLookup()); final InheritedElement? ancestor = _inheritedWidgets == null ? null : _inheritedWidgets![T]; return ancestor; } ... } ``` - 接下来只要搞清楚 _inheritedWidgets 是怎么存值，那么一切都会明朗 ```dart 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? incomingWidgets = _parent?._inheritedWidgets; if (incomingWidgets != null) _inheritedWidgets = HashMap.from(incomingWidgets); else _inheritedWidgets = HashMap(); _inheritedWidgets![widget.runtimeType] = this; } } ``` 整体上逻辑还是比较清晰 1. 遇到某个节点为 **InheritedWidget** 时，会将父节点的 _inheritedWidgets 变量给 incomingWidgets 这个临时变量 1. incomingWidgets 为空：为父类Element的 _inheritedWidgets 变量，实例了一个map对象 2. incomingWidgets 不为空：将父节点_inheritedWidgets 所有数据深拷贝，返回一个全新的Map实例（含有父节点 _inheritedWidgets 所有数据），赋值给父类Element的 _inheritedWidgets 变量 2. 将自身实例赋值给父类Element的 _inheritedWidgets 变量，key为其widget的runtimeType > **为什么任何一个Widget的Element实例的 _inheritedWidgets 变量，可直接拿到父节点InheritedElement实例？** - Element中做了一个父节点向子节点赋值的操作：整个数据传输链清晰了 ```dart abstract class Element extends DiagnosticableTree implements BuildContext { Map? _inheritedWidgets; void _updateInheritance() { assert(_lifecycleState == _ElementLifecycle.active); _inheritedWidgets = _parent?._inheritedWidgets; } ... } ``` - 图示 ![InheritedWidget存取数据](https://raw.githubusercontent.com/xdd666t/MyData/master/pic/flutter/blog/20210714092817.png) ### 刷新机制 > InheritedElement和Element之间有一些交互，实际上自带了一套刷新机制 - InheritedElement存子节点Element： _dependents，这个变量是用来存储，需要刷新的子Element ```dart class InheritedElement extends ProxyElement { InheritedElement(InheritedWidget widget) : super(widget); final Map _dependents = HashMap(); @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() ，来刷新自身 ```dart class InheritedElement extends ProxyElement { InheritedElement(InheritedWidget widget) : super(widget); final Map _dependents = HashMap(); @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变量中了 ```dart abstract class Element extends DiagnosticableTree implements BuildContext { ... @override InheritedWidget dependOnInheritedElement(InheritedElement ancestor, { Object? aspect }) { assert(ancestor != null); _dependencies ??= HashSet(); _dependencies!.add(ancestor); ancestor.updateDependencies(this, aspect); return ancestor.widget; } ... } class InheritedElement extends ProxyElement { InheritedElement(InheritedWidget widget) : super(widget); final Map _dependents = HashMap(); @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 方法中即可 ```dart // 举例 var inheritedElement = context .getElementForInheritedWidgetOfExactType>() as EasyPInheritedElement?; context.dependOnInheritedElement(inheritedElement); ``` > **Provider核心原理，就是采用了InheritedWidget这种刷新机制** 想详细了解Provider相关原理，可参考下面文章 - [源码篇：Flutter Provider的另一面（万字图文）](https://juejin.cn/post/6968272002515894303) > **图示** - 来看下InheritedWidget刷新机制的图示 ![InheritedWIdget刷新机制](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a25d123a35744d884d2237a35d635bc~tplv-k3u1fbpfcp-zoom-1.image) ## 路由小知识 - 路由Navigator中基本都是些操作路由的静态方法，NavigatorState是实现的具体逻辑 ![路由导图](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ef1bd36e1d14182ac7e194ed9c70b26~tplv-k3u1fbpfcp-zoom-1.image) 大家在使用InheritedWidget获取数据的时候，或许有过这样一种困扰：A页面 ---> B页面 ---> C页面如果我在A页面使用InheritedWidget储存了数据，跳转到B页面或者C页面，会发现使用context获取不到A页面的InheritedElement 这侧面证明了Navigator路由跳转：A页面跳转B页面，B页面并不是A页面的子节点 - 大致结构：可勉强理解为，Navigator是所有页面父节点，页面与页面之间是平级关系 ![路由结构](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97cff6b4d1cc42548dc88f7f52626c53~tplv-k3u1fbpfcp-zoom-1.image) **这里我画了下大致结构，如有偏差，请务必指出来，我会尽快修改** **关于Flutter路由原理解析，可参考此文章（作者为啥现在不更文了呢 ~~）**：[Flutter 路由原理解析](https://juejin.cn/post/6844903798398255111) ## 思考 InheritedWidget为我们带了很多便利 - 可以在一个Widget树范围，获取到我们想要InheritedElement（通过泛型区分即可） - InheritedElement和Element各种交互，也实现了一套极其简洁的刷新机制 - 进行一些深度封装，甚至可以无缝的管理很多控件的资源释放但是，Element提供的获取InheritedElement的方式，终究和路由机制无法很好的结合；这也模块设计无法避免的事情，或许某些模块设计的最优解，很难顾忌到其它模快的一些机制 InheritedWidget这把神兵利器，在我们学习Flutter历程中给予了很多帮助 - 但是，当需求逐渐复杂，你的技术不断精进 - 屠龙刀这把神兵，或许渐渐的，不太适合你了 - 有时候，它甚至制约了你的出招 - 一位制造神兵的铁匠，在他心中，最好的神兵利器，或许永远是下一把 **大部分的状态管理框架，将界面层和逻辑层分开，都是逻辑层来处理界面的刷新；逻辑层可以交给InheritedWidget存储管理；说明，我们自己也一定可以存储管理！** - 自己来管理逻辑层，可以摆脱Element树的约束，不用被困在Element树的父子节点中 - 在路由跳转的页面中，可以很轻松的获取上一页面，下一个页面或者上上一个页面逻辑层。这也是GetX中一个核心思想，这并不是一个多么新颖或高深技术，但是，我这觉得这是一种思维上的突破，可以带来更多的可能 # 依赖注入 ## 说明依赖注入有如下实现方式（维基百科）： - 基于接口。实现特定接口以供外部容器注入所依赖类型的对象。 - 基于 set 方法。实现特定属性的public set方法，来让外部容器调用传入所依赖类型的对象。 - 基于构造函数。实现特定参数的构造函数，在新建对象时传入所依赖类型的对象。 - 基于注解。基于[Java的注解功能](https://zh.wikipedia.org/wiki/Java注解)，在私有变量前加“@Autowired”等注解，不需要显式的定义以上三种代码，便可以让外部容器传入对应的对象。该方案相当于定义了public的set方法，但是因为没有真正的set方法，从而不会为了实现依赖注入导致暴露了不该暴露的接口（因为set方法只想让容器访问来注入而并不希望其他依赖此类的对象访问）。 > 强耦合类型的，基于构造函数 ```dart class Test { String msg; Test(String msg) { this.msg = msg; } } ``` > set方式 ```dart class Test { String? _msg; void setMsg(String msg) { this._msg = msg; } } ``` 如果在Java中，图一时方便，直接在构造函数里面传值，然后需要的值越来越多，导致需要增加该构造函数传参，因为强耦合很多类，一改构造函数，爆红一大片（Dart构造函数可选参数的特性，就没有这类问题了） - Getx注入的GetXController都是由GetX框架自己来维护的，如果没有GetX这个中间层会是什么样的？ ![GetX依赖注入-前](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0eb6f5b445ac49f793e1ed5600d4a09c~tplv-k3u1fbpfcp-zoom-1.image) - 引入GetX这个中间层来管理 - 看下图，瞬间就想到了中介者模式 - 这也是控制反转的思想（创建对象的控制权本来在自己手上，现在交给了第三方） ![GetX依赖注入-后](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d77a7d7688f64ff183f6aec1fe00fca8~tplv-k3u1fbpfcp-zoom-1.image) ## Put > 来看下GetX注入的操作 - put使用 ```dart var controller = Get.put(XxxGetxController()); ``` - 看看内部操作 - 哎，各种骚操作 - 主要逻辑在Inst中，Inst是GetInterface的扩展类 ```dart class _GetImpl extends GetInterface {} final Get = _GetImpl(); extension Inst on GetInterface { S put(S dependency, {String? tag, bool permanent = false, InstanceBuilderCallback? builder}) => GetInstance().put(dependency, tag: tag, permanent: permanent); } ``` - 主要的逻辑看来还是GetInstance中 - 大家可以看看这地方单例的实现，我发现很多源码都用这种方式写的，非常简洁 - 全局的数据都是存在 _singl 中，这是个Map - key：对象的runtimeType或者类的Type + tag - value：_InstanceBuilderFactory类，我们传入dependedt对象会存入这个类中 - _singl 这个map存值的时候，不是用的put，而是用的putIfAbsent - 如果map中有key和传入key相同的数据，传入的数据将不会被存储 - 也就是说相同类实例的对象，传入并不会被覆盖，只会存储第一条数据，后续被放弃 - 最后使用find方法，返回传入的实例 ```dart class GetInstance { factory GetInstance() => _getInstance ??= GetInstance._(); const GetInstance._(); static GetInstance? _getInstance; static final Map _singl = {}; S put( S dependency, { String? tag, bool permanent = false, @deprecated InstanceBuilderCallback? builder, }) { _insert( isSingleton: true, name: tag, permanent: permanent, builder: builder ?? (() => dependency)); return find(tag: tag); } void _insert({ bool? isSingleton, String? name, bool permanent = false, required InstanceBuilderCallback builder, bool fenix = false, }) { final key = _getKey(S, name); _singl.putIfAbsent( key, () => _InstanceBuilderFactory( isSingleton, builder, permanent, false, fenix, name, ), ); } String _getKey(Type type, String? name) { return name == null ? type.toString() : type.toString() + name; } S find({String? tag}) { final key = _getKey(S, tag); if (isRegistered(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(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 - find方法还是蛮简单的，就是从map中取数据的操作 ```dart S find({String? tag}) => GetInstance().find(tag: tag); ``` - 看下具体逻辑 - 先判断 _singl 中是否含有该key的数据，有则取，无则抛异常 - 关键代码： **_singl[key]!.getDependency() as S** ，直接通过key去map取值就行了 ```dart class GetInstance { factory GetInstance() => _getInstance ??= GetInstance._(); const GetInstance._(); static GetInstance? _getInstance; static final Map _singl = {}; String _getKey(Type type, String? name) { return name == null ? type.toString() : type.toString() + name; } bool isRegistered({String? tag}) => _singl.containsKey(_getKey(S, tag)); S find({String? tag}) { final key = _getKey(S, tag); if (isRegistered(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(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刷新机制 ## 使用为了知识的连续性，此处简单的写下使用 - 逻辑层 ```dart class GetCounterEasyLogic extends GetxController { var count = 0; void increase() { ++count; update(); } } ``` - 界面 ```dart 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(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里面写了回收实例的操作 - 淦！ ### 内置回收机制 - 此处精简很多代码，只展示回收机制的代码 ```dart class GetBuilder extends StatefulWidget { final GetControllerBuilder 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 createState() => GetBuilderState(); } class GetBuilderState extends State> with GetStateUpdaterMixin { T? controller; bool? _isCreator = false; VoidCallback? _remove; Object? _filter; @override void initState() { super.initState(); widget.initState?.call(this); var isRegistered = GetInstance().isRegistered(tag: widget.tag); if (widget.global) { if (isRegistered) { controller = GetInstance().find(tag: widget.tag); } else { controller = widget.init; GetInstance().put(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(tag: widget.tag)) { GetInstance().delete(tag: widget.tag); } } _remove?.call(); controller = null; _isCreator = null; _remove = null; _filter = null; } @override Widget build(BuildContext context) { return widget.builder(controller!); } } ``` 代码里的逻辑还是相当清晰的，initState获取实例，dispose回收实例 1. 通过GetBuilder上泛型获取相应GetXController实例 - 不存在：使用init传入的实例 - 存在：直接使用；init传入的实例无效 2. autoRemove可以控制是否自动回收GetXController实例 - 默认为true：默认开启自动回收 - true：开启自动回收 false：关闭自动回收 ### 刷新逻辑 - 这里仅保留刷新逻辑的相关代码，去掉了无需关注的代码 ```dart mixin GetStateUpdaterMixin on State { void getUpdate() { if (mounted) setState(() {}); } } class GetBuilder extends StatefulWidget { final GetControllerBuilder 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 createState() => GetBuilderState(); } class GetBuilderState extends State> with GetStateUpdaterMixin { T? controller; @override void initState() { super.initState(); ... if (widget.global) { if (isRegistered) { controller = GetInstance().find(tag: widget.tag); } else { controller = widget.init; GetInstance().put(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); if (oldWidget.id != widget.id) { _subscribeToController(); } widget.didUpdateWidget?.call(oldWidget, this); } @override Widget build(BuildContext context) { return widget.builder(controller!); } } ``` **关键步骤** 1. 通过泛型获取注入的GetXController实例 2. 添加监听代码 - addListener：添加监听回调 - addListenerId：添加监听回调，必须设置id，update刷新的时候也必须写上配套的id 3. 监听代码：核心代码就是getUpdate方法，方法在 GetStateUpdaterMixin 中 - getUpdate()逻辑就是 setState()，刷新当前GetBuilder > **图示** ![GetBuilder](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2491aef4ace945b7bdd46c9e10cd07e1~tplv-k3u1fbpfcp-zoom-1.image) ## Update - 触发逻辑还是很简单的，使用update即可 - Ids：和上面的Getbuilder对应起来了，可刷新对应设置id的GetBuilder - condition：是否刷新一个判断条件，默认为true（假设必须某个id大于3才能刷新：update([1, 2, 3, 4], index > 3) ） ```dart abstract class GetxController extends DisposableInterface with ListNotifier { void update([List