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

注：基于本文示例的性能逻辑进行比照

[]()

作者：京东物流 张俊飞

起源：京东云开发者社区