1.1 声明式UI
声明式UI其实并不是近几年的新技术,但是近几年声明式UI框架非常的火热。单说移动端,跨平台方案有:RN、Flutter。iOS原生有:SwiftUI。android原生有:compose。华为的鸿蒙系统前段时间也发布了基于type-js的ArkUI的beta版。可以看到声明式UI是以后的前端发展趋势。而状态管理是声明式UI框架的重要组成部分。
1.2 声明式UI框架的状态
2.1 使用方式
图1 UI实现
实现功能,当点击“按钮”的时候,更新“你好”这个组件,页面部分代码实现:
class SecondPage extends StatelessWidget {final _model = SecondPageModel();@overrideWidget build(BuildContext context) => ChangeNotifierProvider(create: (_) => _model,child: Scaffold(body: Container(alignment: Alignment.center,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Consumer<SecondPageModel>(builder: (context, model, child) => Text(model.textA),),Selector<SecondPageModel, String>(builder: (context, model, child) => Text(model),selector: (context, secondPageModel) => secondPageModel.textB,),Consumer<SecondPageModel>(builder: (context, model, child) => TextButton(onPressed: () => model.textA = "你好",child: Text("按钮"),),),],),),),);}
class SecondPageModel with ChangeNotifier {String _textA = "hello";String _textB = "world";String get textA => _textA;set textA(String value) {_textA = value;notifyListeners();}String get textB => _textB;set textB(String value) {_textB = value;notifyListeners();}}
2.2 问题和不足
2.2.1 控件刷新
控件名称 | 描述 |
1、Text | 显示“你好”的文本控件 |
2、TextButton | 按钮 |
3、Text | 按钮包含的文本 |
4、Consumer | 包裹“TextButton”,否则无法刷新 |
5、Consumer | 包裹“你好”Text控件,监测数据的变化刷新状态 |
2.2.2 问题分析
代码不够简洁
3.1 使用方式
实现同样的上述页面逻辑,代码如下(同样基于StatelessWidget实现):
首先不需要依赖外部的provider提供Model,任何想要独立刷新的区域使用TosObWidget控件包裹即可,使用比较灵活,我们可以把TosObWidget插入到任何我们想要的位置(包括provider内),代码逻辑比较简洁。
class FirstPage extends StatelessWidget {final _model = FirstPageModel();@overrideWidget build(BuildContext context) => Scaffold(body: Container(alignment: Alignment.center,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [TosObWidget(() => Text(_model.textA.value)),TosObWidget(() => Text(_model.textB.value)),TextButton(onPressed: () => _model.textA.value = "你好",child: Text("按钮"),),],),),);}
model实现:
model的实现更加简洁,不需要继承ChangeNotifier,所以可以把状态数据定义在任何我们想要的地方,使用.tos扩展属性返回一个包含默认值的RxObj<T>对象,当我们使用set方法更改RxObj<T>的value的时候,通知依赖此对象的TosObWidget区域进行刷新,例:我们点击按钮的时候,_model.textA.value = "你好",执行后就会刷新依赖textA的TosObWidget(() => Text(_model.textA.value))区域。
class FirstPageModel {final textA = "hello".tos;final textB = "world".tos;}
查看刷新状态(与provider对比):
provider | TosObWidget | ||
控件名称 | 描述 | 控件名称 | 描述 |
1、Text | 显示“你好”的文本控件 | 1、Text | 显示“你好”的文本控件 |
2、TextButton | 按钮 | 2、TosObWidget | 包裹“你好”文本控件 |
3、Text | 按钮包含的文本 | 3、TextButton | 按钮控件 |
4、Consumer | 包裹“TextButton”,否则无法刷新 | ||
5、Consumer | 包裹“你好”Text控件,监测数据的变化刷新状态 | ||
6、Selector | 包裹“provider”的文本控件,当数据没有变化的那时候Selector包裹的内容不会刷新状态,但是Selector会校验数据是否变化决定内容是否rebuild | ||
对比发现TosObWidget这种方式,只有依赖的数据发生变化的TosObWidget才会更新状态,可以实现状态刷新粒度最小化,提高性能。
3.2 设计思路
3.2.1 TosObWidget
图2 状态管理流程
首先是使用入口,定义一个TosObWidget控件,入参为build函数,返回widget,每个TosObWidget就是一个可独立进行状态刷新的区域,TosObWidget控件的实现如下:
typedef WidgetCallback = Widget Function();//TosObWidget的实现class TosObWidget extends _ObzWidget {final WidgetCallback builder;const TosObWidget(this.builder, {Key key}) : super(key: key);Widget build() => builder();}//TosObWidget的父类,TosObWidget的build函数为重载的其父类_ObzWidget的build函数,//最终会被_ObzWidget的_ObzState调用abstract class _ObzWidget extends StatefulWidget {const _ObzWidget({Key key}) : super(key: key);//创建状态_ObzState createState() => _ObzState();//创建widgetWidget build();}//state的实现,主要逻辑都在这个类进行实现class _ObzState extends State<_ObzWidget> {RxObserver _observer;///构造函数_ObzState() {_observer = RxObserver();}///初始化void initState() {_observer.observe(_updateUI);super.initState();}///刷新UIvoid _updateUI() {if (mounted) {setState(() {});}}///页面销毁void dispose() {_observer?.close();super.dispose();}///创建widget,在这里进行状态观察的绑定Widget get buildWidgets {//获取proxy原来的值,也就是nullfinal observer = RxObserver.proxy;//把widget的观察者赋值过去RxObserver.proxy = _observer;//在widget.build()的时机进行绑定final widgets = widget.build();//绑定后恢复proxy的值,避免其他widget引用出现错误RxObserver.proxy = observer;return widgets;}Widget build(BuildContext context) => buildWidgets;}
3.2.2 TosObWidget逻辑分析
1.首先_ObzState依赖一个RxObserver _observer变量
2.RxObserver _observer这个 变量持有了_updateUI()这个方法,最终会通过这个方法刷新TosOBWidget的状态
3.当TosObWidget执行build的时候,会通过一个静态变量RxObserver.proxy把_observer共享出去
4.这样TosObWidget包裹的内容,使用RxObj的getValue的时候会拿到被共享的_observer,这时建立RxObj和TosObWidget的联系
5.联系建立后,重置共享变量RxObserver.proxy
3.2.3 RxObj的实现
图3 RxObj实现流程图
1.当执行RxObj的value的get方法时,代码如下,拿到 RxObserver的静态成员变量proxy,类型为RxObserver(即为上一步TosObWidget共享出来的_observer)
2.判断RxObserver.proxy不为空,且没有被添加到_observers列表( List<RxObserver> _observers),则添加
3.当执行RxObj的value的set方法时,校验value是否与当前的value值相同,且判断是否是首次创建(首次创建不会执行状态刷新)
4.校验完成后则赋值执行refresh()函数,更新TosObWidget的状态
///RxObj类,所有数据类型可通过.obz扩展属性获得此示例///当value发生变化时,通知RxObserver更新UIclass RxObj<T> {T _value;bool _firstRebuild = true;final List<RxObserver> _observers = [];RxObj(this._value);///构造函数重载,如果没有初始值的时候使用RxObj.obj();T get value {if (RxObserver.proxy != null && !_observers.contains(RxObserver.proxy)) {_observers.add(RxObserver.proxy);}return _value;}set value(T val) {if (_value == val && _firstRebuild) {return;}_firstRebuild = false;_value = val;//数据变化的时候,更新UIrefresh();}///刷新UI,使用引用数据类型的时候,如果没有调用set方法,需要手动refresh()一下void refresh() {if (_observers.isNotEmpty) {for (var observer in _observers) {if (observer.canUpdate) {//observer.update()函数即为执行与Rxobj关联的TosObWidget的_updateUI()函数observer.update();}}}}}
/// 通过静态变量proxy,在widget build的时候与状态绑定/// 定义一个观察者,观察RxObj<T>的数据变化,并通知UI更新class RxObserver<T> {///观察数据变化方法回调VoidCallback update;///判断当前widget是否具备刷新能力(Obz)bool get canUpdate => update != null;///TosObWidget dispose的时候执行关闭void close() {update = null;}///注意:这是一个临时变量,最用为使RxObj和TosObWidget建立起订阅关系static RxObserver proxy;///观察事件的变化observe(VoidCallback update) {this.update = update;}}
class FirstPageModel {final textA = "hello".tos;final textB = "world".tos;}
6.tos扩展属性的实现如下:
///RxObj扩展属性extension RxT<T> on T {///返回RxObj实例,使用.tosRxObj<T> get tos => RxObj<T>(this);}
7.如果要创建一个默认值为空的,RxObj实例,使用如下方式:
final emptyValue = RxObj<String>.obj();final listValue = ["aaa", "bbb"].tos;void add(String value) {listValue.value.add(value);listValue.refresh();}
至此,就完成了TosObWidget控件的状态刷新。
注:基于本文示例的功能逻辑进行对比
provider | TosObWidget | |
代码行数 | 60行 | 37行 |
灵活性 | 使用到的类: 1、ChangeNotifierProvider 2、Consumer 3、Selector 4、ChangeNotifier | 使用到的类: 1、TosObWidget 2、.tos(扩展属性) |
状态管理 | 刷新6个控件 | 刷新3个控件 |
求分享
求点赞
求在看