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 总结

注：基于本文示例的功能逻辑进行对比

作者：京东物流 张俊飞

来源：京东云开发者社区