Flutter状态管理新的实践 | 京东云技术团队

1 布景介绍

1.1 声明式ui

声明式UI其实并不是近几年的新技术，可是近几年声明式UI结构非常的火热。单说移动端，跨渠道方案有：RN、Flutter。iOS原生有：SwiftUI。android原生有：compose。能够看到声明式UI是以后的前端发展趋势。而状况办理是声明式UI结构的重要组成部分。

1.2 声明式UI结构的状况

在移动端之前的指令式UI结构，没有状况的概念。每个控件其实都是无状况的，咱们要更新UI需要手动的去set。指令式UI引进状况的概念，状况能够理解为订阅了控件所依靠数据的改变，当一个控件依靠的数据发生改变时，主动改写UI展示。最大的优势就是能够很便利的做到UI和逻辑的解耦。

2 provider状况办理

2.1 运用办法

界说一个页面如下：

完成功用，当点击“按钮”的时分，更新“你好”这个组件
页面部分代码完成（根据StatelessWidget完成）：

model部分完成：

2.2 问题和缺乏

点击“按钮”的时分检查页面改写，发现下表罗列的Widget都履行了改写操作，运用Selector虽然被包裹的内容没有改写，可是需要进行校验操作。

2.2.1 控件改写

2.2.2 问题剖析

1. 运用不太灵敏，想要消费事件改写UI必须有顶层的Provider供给model，在一些杂乱场景可能会增加逻辑杂乱度
2. 状况改写，不能完成最小粒度的办理
3. 代码不够简洁

3 新的状况办理办法实践

3.1 运用办法

完成同样的上述页面逻辑，代码如下(同样根据StatelessWidget完成)：
首要不需要依靠外部的provider供给Model，任何想要独立改写的区域运用TosObWidget控件包裹即可，运用比较灵敏，咱们能够把TosObWidget插入到任何咱们想要的方位（包括provider内），代码逻辑比较简洁

model完成：

model的完成愈加简洁，不需要继承ChangeNotifier，所以能够把状况数据界说在任何咱们想要的当地，运用.tos扩展特点回来一个包括默认值的RxObj目标，当咱们运用set办法更改RxObj的value的时分，告诉依靠此目标的TosObWidget区域进行改写，例：咱们点击按钮的时分，_model.textA.value = “你好${_model.i++}”，履行后就会改写依靠textA的TosObWidget(() => Text(_model.textA.value))区域

检查改写状况（与provider比照）：

比照发现TosObWidget这种办法，只要依靠的数据发生改变的TosObWidget才会更新状况，能够完成状况改写粒度最小化，提高性能

3.2 规划思路

3.2.1 TosObWidget

首要是运用进口，界说一个TosObWidget控件，入参为build函数，回来widget，每个TosObWidget就是一个可独立进行状况改写的区域

TosObWidget控件的完成如下：

TosObWidget的build函数为重载的其父类_ObzWidget的build函数，终究会被_ObzWidget的_ObzState调用，_ObzWidget的完成如下：

接下来检查_ObzState的完成，主要逻辑都在这个类进行完成，这里贴出一切的代码（留意框起来的逻辑）：

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
6. 这样在RxObj的value履行set办法时，会调用到与其绑定的TosObWidget的_updateUI()这个函数

3.2.3 RxObj的完成

如下贴出RxObj的value的get和set函数：

1. 当履行RxObj的value的get办法时，代码如下，拿到 RxObserver的静态成员变量proxy，类型为RxObserver（即为上一步TosObWidget同享出来的_observer）
2. 判别RxObserver.proxy不为空，且没有被增加到_observers列表（ List _observers），则增加
3. 当履行RxObj的value的set办法时，校验value是否与当前的value值相同，且判别是否是初次创立（初次创立不会履行状况改写）
4. 校验完成后则赋值履行refresh()函数，更新TosObWidget的状况

refresh()函数的完成如下：
observer.update()函数即为履行与Rxobj相关的TosObWidget的_updateUI()函数：

看下RxObserver的完成：
留意框起来的逻辑，update函数即上面_ObzState的_updateUI()函数的引证

至此整个完成流程已经贯通了，接下来看下如何运用：

1）经过.tos扩展特点界说RxObj变量：

2）.tos扩展特点的完成如下：

3）假如要创立一个默认值为空的，RxObj实例，运用如下办法：

此刻假如咱们运用RxObj的setValue办法，就会改写依靠它的一切TosObWidget控件，假如有些情况下，没有调用setValue办法，可是需要改写状况，可手动调用refresh()办法，完成如下：

至此，就完成了TosObWidget控件的状况改写

4 总结

注：根据本文示例的功用逻辑进行比照

作者：京东物流 张俊飞

来历：京东云开发者社区