共计 2477 个字符，预计需要花费 7 分钟才能阅读完成。
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 问题剖析
- 应用不太灵便，想要生产事件刷新 UI 必须有顶层的 Provider 提供 model，在一些简单场景可能会减少逻辑复杂度
- 状态刷新，不能实现最小粒度的治理
- 代码不够简洁
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 逻辑剖析
- 首先_ObzState 依赖一个 RxObserver _observer 变量
- RxObserver _observer 这个 变量持有了_updateUI()这个办法，最终会通过这个办法刷新 TosOBWidget 的状态
- 当 TosObWidget 执行 build 的时候，会通过一个动态变量 RxObserver.proxy 把_observer 共享进来
- 这样 TosObWidget 包裹的内容，应用 RxObj 的 getValue 的时候会拿到被共享的_observer，这时建设 RxObj 和 TosObWidget 的分割
- 分割建设后，重置共享变量 RxObserver.proxy
- 这样在 RxObj 的 value 执行 set 办法时，会调用到与其绑定的 TosObWidget 的_updateUI()这个函数
3.2.3 RxObj 的实现
[]()
如下贴出 RxObj 的 value 的 get 和 set 函数：
- 当执行 RxObj 的 value 的 get 办法时，代码如下，拿到 RxObserver 的动态成员变量 proxy，类型为 RxObserver（即为上一步 TosObWidget 共享进去的_observer）
- 判断 RxObserver.proxy 不为空，且没有被增加到_observers 列表（List _observers），则增加
- 当执行 RxObj 的 value 的 set 办法时，校验 value 是否与以后的 value 值雷同，且判断是否是首次创立（首次创立不会执行状态刷新）
- 校验实现后则赋值执行 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 总结
注：基于本文示例的性能逻辑进行比照
[]()
作者：京东物流 张俊飞
起源：京东云开发者社区