Reactive UI -- 反应式编程UI框架入门学习(一)

news2024/11/29 14:54:57

反应式编程

反应式编程是一种相对于命令式的编程范式,由函数式的组合声明来构建异步数据流。要理解这个概念,可以简单的借助Excel中的单元格函数。

 

上图中,A1=B1+C1,无论B1和C1中的数据怎么变化,A1中的值都会自动变化,这其中就蕴含了反应式/响应式编程的思想。

反应式编程对于数据的处理不关心具体的数据值是多少,只要构建出数据的函数式处理,就能并行的异步处理数据流。

Reactive UI

Reactive UI 是一种反应式编程的跨平台MVVM框架,支持Xamarin Forms、Xamarin.iOS、Xamarin.Android、Xamarin.Mac、Tizen、Windows Forms、WPF 和UWP。

本文对比经典的MVVM框架MVVMLight框架来展示ReactiveUI框架的特殊之处。

在MVVMLight中,依赖属性和命令的绑定一般都是放在Xaml中,并且大部分情况下不需要给控件定义Name属性。

1

<Button Content="{Binding Content}" Command="{Binding OpenFileCommand}"/>

这是属于弱绑定,在Reactive UI框架中也提供这样的弱绑定,但Reactive UI框架官方推荐使用后台强绑定方式。

在强绑定方式中,需要给控件定义他的Name属性。

1

<Button Name="btnOpenFile"/>

在界面后台的cs文件中使用强绑定方式。

1

2

//BtnContent是ViewModel中的属性,btnOpenFile是界面中的控件,并指定控件需要绑定的依赖属性

 this.OneWayBind(ViewModel, vm => vm.BtnContent, vw => vw.btnOpenFile.Content);

 在Reactive UI框架中,提供了单向绑定和双向绑定两种绑定类型,上述代码中的OneWayBind是属于ViewModel->View的单向绑定,另外还有一个API  Bind则是双向绑定。

this.Bind(ViewModel, vm => vm.BtnContent, vw => vw.btnOpenFile.Content);

之所以官方推荐这样的绑定方式,是因为框架中提供了一个管理ViewModel生命周期的API WhenActivated,解决了Xaml弱绑定方式带来的内存泄露的可能性。

在WhenActivated API的函数回调中进行绑定属性和Command,可以同步跟踪View和对应绑定属性的生命周期,避免发生内存泄露。

   this.WhenActivated(dispos => {
                this.OneWayBind(ViewModel, vm => vm.BtnContent, vw => vw.btnOpenFile.Content).DisposeWith(dispos);
            });

WhenActivated 会在View被激活时同步调用注册的回调函数,注意,在OneWayBind后面新增了一个API调用DisposeWith,他可以确保当界面被销毁时,对应的viewModel及其绑定的属性和命令也会被销毁。

类似的,绑定Commond

 this.WhenActivated(dispos => {
                this.OneWayBind(ViewModel, vm => vm.BtnContent, vw => vw.btnOpenFile.Content).DisposeWith(dispos);

                 this.BindCommand(ViewModel,
               viewModel => viewModel.OpenPage,
               view => view.openButton)
               .DisposeWith(disposableRegistration);
            });    

这样的强绑定相比于Xaml中的弱绑定,会有以下的优势:

1.提供了ViewModel的生命周期管理,避免内存泄露。

2.控件和后台属性的对应关系更为直观,提高代码的可阅读性。

当然也有一定的缺陷,会增加代码量,并且增加View和ViewModel的耦合性。

定义属性和命令

在MVVMLight中定义一个带通知的属性和Commond:

        private string content ;
        public string Content
        {
            get { return content; }
            set
            {
                content = value;
                RaisePropertyChanged(() => Content);
            }
        }

        private RelayCommand openFileCommand = null;
        public RelayCommand OpenFileCommand
        {
            get { return openFileCommand = openFileCommand ?? new RelayCommand(OpenFile); }
        }

在ReactiveUI中也通成功了类似RaisePropertyChanged和RelayCommand功能的API,RaiseAndSetIfChanged和ReactiveCommand。

  private string content;
        public string Content
        {
            get { return content; }
            set
            {
                this.RaiseAndSetIfChanged(ref content,value);
            }
        }

        private ReactiveCommand<Unit, Unit> openFileCommand;
        public ReactiveCommand<Unit, Unit> OpenFileCommand
        {
            get { return openFileCommand = openFileCommand ?? ReactiveCommand.Create(() => { }); }
        }

其中ReactiveCommand的两个Unit,前一个是传入参数,后一个是返回值。ReactiveCommand的定义与MVVMLight大同小异。

但是在ReactiveUI中,还有更简单方便的定义可通知的属性,使用标记[Reactive]。

 [Reactive]
 public string Content { get; set; }

以上代码等价于

  private string content;
        public string Content
        {
            get { return content; }
            set
            {
                this.RaiseAndSetIfChanged(ref content,value);
            }
        }

 动态数据集合

在.Net中,带通知功能的数据集合一般使用ObservableCollection,但是这个类存在一个限制,不支持多线程操作元素,只能在主线程中增加或者删除元素。所以在多线程操作ObservableCollection的时候,一般都需要通过Dispatcher或者线程上下文来推送操作到UI线程。

针对这个问题,ReativeUI框架提供了更优雅的操作方式,SourceList,SourceCache, ObservableCollectionExtended,都是线程安全的集合,需要和ReadOnlyObservableCollection一起搭配使用,用于创建可绑定的线程安全的数据集合。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//这是用于View绑定的数据集合

private readonly ReadOnlyObservableCollection<string> _disks;

 public ReadOnlyObservableCollection<string> Disks => _disks;

//这里的ObservableCollectionExtended和SourceList作用相同,都是与_disks强关联并创

//建副本集合,在操作数据的时候,不直接操作_disks或者Disks,而是对DisksSource或

//DisksSource2进行操作,会自动的同步到_disk集合并更新到绑定的UI,而Disks用于界面绑定。

  public ObservableCollectionExtended<string> DisksSource;

 public SourceList<string> DisksSource2;

//以下代码是将DiskSource和DiskSource2与_disk建立强关联关系的两种方式

  DisksSource = new();

            DisksSource.ToObservableChangeSet()

                .Bind(out _disks)

                .Subscribe();

 DisksSource2 = new SourceList<string>();

 DisksSource2.Connect().Bind(out _disks).Subscribe();

函数式组合声明

以一个读取磁盘文件夹信息的小功能为例。

一般都需要定义一个ObservableCollection的Model集合,在子线程中需要通过Dispatcher操作集合。

 public ObservableCollection<FolderModel> FolderModels { get; set; }
        private async Task LoadFolderInfoWithSelectedDiskChanged(string diskName)
        {
            await Task.Run(() => {

                var files = Directory.GetDirectories(diskName);
                foreach (var fileName in files)
                {
                    FolderModel folderModel = new FolderModel();
                    DirectoryInfo directoryInfo = new DirectoryInfo(fileName);
                    folderModel.FolderName = directoryInfo.Name;
                    folderModel.CreateTime = directoryInfo.CreationTime;
                    _dispatcher.Invoke(() => {

                        FolderModels.Add(folderModel);
                    });
                }
            });
        }

而在ReactiveUI 框架中,不需要Dispatcher这个东西,而是需要通过一个辅助类ObservableAsPropertyHelper。

ObservableAsPropertyHelper 是一个简化 IObservable 和 ViewModel 上的属性之间的互操作的类,为一个普通属性/字段和一个IObservable对象之间建立观察者模式的联系。

以上代码可以修改成:

  //当前选中的磁盘符号,是一个IObservable对象

  [Reactive]
  public string SelectedDisk { get; set; }

//使用ObservableAsPropertyHelper包装
private readonly ObservableAsPropertyHelper<IEnumerable<FolderModel>> _folderModels;
//FolderModels可用于强绑定
public IEnumerable<FolderModel> FolderModels => _folderModels.Value;

//将_folderModels和SelectedDisk建立观察者和被观察者联系,构建函数组合式声明,当SelectedDisk改变时,
//会自动触发所注册的事件并自动给指定的属性FolderModels赋值。

   _folderModels = this.WhenAnyValue(s => s.SelectedDisk)
                .Where(s => !string.IsNullOrWhiteSpace(s))
                .SelectMany(LoadFolderInfoWithSelectedDiskChanged)
                .ObserveOn(RxApp.MainThreadScheduler)
                .ToProperty(this, nameof(FolderModels));//将计算后得到的结果赋值到指定的属性中

private async Task<IEnumerable<FolderModel>> LoadFolderInfoWithSelectedDiskChanged(string diskName)
        {
            List<FolderModel> folderModels = new List<FolderModel>();
            var files = Directory.GetDirectories(diskName);
            foreach (var fileName in files)
            {
                FolderModel folderModel = new FolderModel();
                DirectoryInfo directoryInfo = new DirectoryInfo(fileName);
                folderModel.FolderName = directoryInfo.Name;
                folderModel.CreateTime = directoryInfo.CreationTime;
                folderModels.Add(folderModel);
            }
            //这个方法中不需要操作FolderModels 只需要把结果返回即可
            await Task.CompletedTask;
            return folderModels;
        }

其中ObservableAsPropertyHelper包装的对象是可以任何对象,而LoadFolderInfoWithSelectedDiskChanged方法必须要带有结果返回的异步方法,这样就构成了函数式声明的异步数据流。

本文列了一些ReactiveUI的简单使用,下一篇会通过一个实例代码进一步学习ReactiveUI框架

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/41479.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kafka - 08 Kafka Broker工作流程 | 节点服役 | 节点退役

文章目录1. Kafka Broker 工作流程2. Kafka 节点服役1. 增加一个Kafka节点2. 执行负载均衡操作3. Kafka 节点退役1. Kafka Broker 工作流程 Kafka上下线时Zookeeper中的数据变化&#xff1a; [zk: localhost:2181(CONNECTED) 9] ls / [zookeeper, kafka_cluster][zk: localhost…

使用nw.js快速开发一个基于浏览器的小型桌面端(适用于高校学生实验作业)

首先讲下退坑事项&#xff0c;节约读者时间 生成的exe会依赖SDK文件夹下的一些dll&#xff0c;所以不能简单的交付这个exe&#xff0c;需要使用额外的软件进行打包&#xff0c;如Enigma Virtual Box、inno setup自定义可执行文件的icon也要额外软件&#xff0c;如Resource Hac…

SCDM 实例教程:基本几何建模

作者 | 张杨 ANSYS SpaceClaim Direct Modeler&#xff08;简称 SCDM&#xff09;是基于直接建模思想的新一代3D建模和几何处理软件。SCDM可以显著地缩短产品设计周期&#xff0c;大幅提升CAE分析的模型处理质量和效率&#xff0c;为用户带来全新的产品设计体验。 本文将主要…

常用 CMD 命令

前言 作为一个程序员&#xff0c;可能更多的是在 Linux 中使用命令来操作。但在日常使用 Windows 的过程中&#xff0c;或多或少会使用到命令提示符窗口&#xff0c;也就是 Windows 中的 CMD。这个时候&#xff0c;掌握一些常用的命令就尤为重要了&#xff0c;一方面方便自己使…

排序-指标解读

一、ROC ROC曲线全称是(receiver operating characteristic cure)受试者工作特征曲线。 首先大家看到这里肯定会好奇&#xff0c;为啥名字这么奇怪&#xff0c;来一波背景介绍先。 “ROC起先应用于军事领域&#xff0c;据说在第二次世界大战期间&#xff0c;ROC 曲线最先是由…

几分钟快速学会Linux开启启动服务

背景 最近在银行遇到一个部署问题&#xff0c;uat、prod 两个环境的ECS中的服务要求制作好基础镜像&#xff0c;上环境的时候只需要在对应的ECS中选择更换系统即可&#xff0c;不允许传统连接SSH上去安装&#xff0c;这就要求我们就得提前把需要运行的服务内置到系统中&#x…

债券数据集:绿色债券数据集、历时新发、发行债券、DCM定价估值四大指标数据

1、绿色债券数据集 1、数据来源&#xff1a;wind 2、时间跨度&#xff1a;2016.01-2021.11年 3、区域范围&#xff1a;全国 4、指标说明&#xff1a; 部分指标如下&#xff1a; 数据截图如下&#xff1a; 2、历史新发债券数据库 1、数据来源&#xff1a;wind 2、时间跨度…

领悟《信号与系统》之 傅立叶变换的性质与应用

傅立叶变换的性质与应用一、傅里叶变换性质表二、傅里叶性质详细1. 线性性质2. 尺度变换特性3. 时移特性4. 频移特性5. 时域微分特性6. 频域微分特性7. 时域积分特性8. 频域积分特性9. 卷积定理1. 时域卷积定理2. 频域卷积定理10. 对称性11. 帕塞瓦尔定理依据傅里叶变换对概念&…

xxl-job 快速使用

xxl-job 快速使用xxl-job 简单使用注意事项执行xxl-job 简单使用 xxl-job 官方使用说明 XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。 注意事项 详细可…

【Canvas】js用Canvas绘制阴阳太极图动画效果

学习JavaScript是否兴趣缺缺&#xff0c;那就需要来一个兴趣学习&#xff0c;问一下有没有兴趣用Canvas画图呢&#xff0c;可以画很多有趣的事物&#xff0c;自由发挥想象&#xff0c;收获多多哦&#xff0c;这里有一个例子&#xff0c;如何用canvas画阴阳太极图动图效果&#…

王道考研——操作系统(第二章 进程管理)(死锁)

一、死锁的概念 什么是死锁 死锁、饥饿、死循环的区别 死锁产生的必要条件 什么时候会发生死锁 死锁的处理策略 知识回顾与重要考点 二、死锁的处理策略——预防死锁 知识总览 破坏互斥条件 破坏不剥夺条件 破坏请求和保持条件 破坏循环等待条件 知识回顾与重要考点 与前面哲…

分省/市/县最低工资标准(2012-2021年)和 全国/省/市/县GDP数据(1949-2020年)

一、最低工资数据 1、数据来源&#xff1a;各省\市\县政府公布资料 2、时间跨度&#xff1a;2012-2021年 3、区域范围&#xff1a;全国各省\市\县 4、指标说明&#xff1a; 部分数据如下&#xff1a; 二、各省市县人均GDP 1、数据来源&#xff1a;地方统计局 2、时间跨度…

常用PC,移动浏览器User-Agent大全

常用PC,移动浏览器User-Agent大全,提供PC浏览器user-agent&#xff0c;Android手机浏览器user-agent大全 PC端User-Agent IE 9.0 IE 8.0 IE 7.0 IE 6.0 Firefox 4.0.1–MAC Firefox 4.0.1–Windows Opera 11.11–MAC Opera 11.11–Windows Chrome 17.0–MAC safari 5…

现在的湖仓一体像是个伪命题

文章目录开放的计算引擎SPL助力湖仓一体开放且完善的计算能力多数据源混合计算文件计算支持完善的计算能力直接访问源数据数据整理后的高性能计算SPL资料从一体机、超融合到云计算、HTAP&#xff0c;我们不断尝试将多种应用场景融合在一起并试图通过一种技术来解决一类问题&…

AWS Lambda从入门到精通

这里写自定义目录标题AWS Lambda从入门到精通介绍调用AWS Lambda的函数请求响应&#xff08;RequestResponse&#xff09;式调用采用请求响应的同步方式以函数作为应用程序的后端后端应用程序的用例和需求AWS Lambda从入门到精通 Amazon发布AWS Lambda服务&#xff0c;云计算的…

Windows配置python3环境变量解决无法识别pip指令报错

Python官网下载 Python官网下载地址 在Windows系统中&#xff0c;推荐下载.msi或.exe安装包。需要注意&#xff0c;python3和python2的语法有很大区别&#xff0c;按照实际情况下载对应版本。本次安装的是Python 3.10.8稳定版。 环境变量配置 安装过程 如果是以.exe安装包方…

机器学习中的数学基础(三):随机变量

机器学习中的数学基础&#xff08;三&#xff09;&#xff1a;随机变量3 随机变量3.1 离散型随机变量3.2 连续型随机变量3.3 简单随机抽样3.4 似然函数3.5 极大似然估计在看西瓜书的时候有些地方的数学推导&#xff08;尤其是概率论的似然、各种分布&#xff09;让我很懵逼&…

【学习笔记46】JavaScript购物车的实现

一、案例效果 1、将通过数据重构页面 查询数据, 渲染页面 2、全选 选中全选按钮后, 根据全选按钮的选中状态, 修改所有商品的选中状态重新渲染视图 3、清空购物车 清空商品数据重新渲染视图 4、结算 找到所有选中的商品计算所有选中商品各自的总价计算所有选中商品的总价…

【MySQL】MVCC原理分析 + 源码解读 -- 必须说透

文章目录前言一、MVCC 介绍二、MySQL MVCC 介绍三、MySQL MVCC实现原理源码分析3.1 隐式字段源码验证3.2 undo logundo log格式undo log源码验证写insert undo log源码写update undo log源码写undo log源码roll_ptr是如何指向insert undo log的?roll_ptr是如何指向update undo…

Thymeleaf模板

Thymeleaf可用于前后端分离&#xff0c; 下图&#xff0c;value"aa"&#xff0c; 在本地静态资源可以改变值&#xff0c;但是在web端不可以 前端可以在本地测试&#xff0c;有数据了显示数据 所以前后端分离 th属性 常用th属性解读html有的属性&#xff0c;Thymel…