关于ReactiveUI的向导,适用于所有.NET平台的高级可组合功能反应式模型 - 视图 - 视图模型框架

ReactiveUI是一个可组合的跨平台模型 - 视图 - 视图模型框架,适用于所有.NET平台,受功能性反应式编程的启发。它允许您在一个可读位置围绕功能表达想法,从用户界面抽象出可变状态,并提高应用程序的可测试性

反应式编程简介

很久以前,当计算机编程首次出现时,机器必须手动编程。如果技术人员以正确的顺序输入正确的机器代码序列,则生成的程序行为将满足业务要求。而不是告诉计算机如何完成它的工作,哪个容易出错并且过分依赖于程序员的无懈可击,为什么我们不告诉它它的工作是什么,让它把剩下的工作弄清楚了?

ReactiveUI的灵感来自功能反应式编程的范例,它允许您将用户输入建模为随时间变化的函数。这非常酷,因为它允许您从用户界面中抽象出可变状态,并在一个可读位置表达功能,同时提高应用程序可测试性。反应式编程乍一看看起来可怕而复杂,但描述反应式编程的最佳方法是考虑电子表格:

在这里插入图片描述

-三个单元格,A,B和C.
-C定义为A和B的总和。
-每当A或B发生变化时,C都会做出反应来更新自身。
这是反应式编程:更改会自动在整个系统中传播。欢迎来到编程范例的花生酱和果冻。有关详细信息,请观看此视频来自Xamarin Evolve会议 - 为什么您应该使用 Michael Stonis的反应式编程来构建更好的移动应用程序。

NuGet包

安装以下软件包以开始构建您自己的ReactiveUI应用程序。注意:某些特定于平台的软件包是必需的。这意味着在正确安装软件包之前,您的应用程序将无法按预期执行。有关详细信息,请参阅“ 安装文档”页面。

平台ReactiveUI包版本
.NET标准ReactiveUI9.16.9
ReactiveUI.Fody9.16.9
单元测试ReactiveUI.Testing9.16.9
通用WindowsReactiveUI9.16.9
WPFReactiveUI.WPF9.16.9
Windows窗体ReactiveUI.WinForms9.16.9
Xamarin.FormsReactiveUI.XamForms9.16.9
Xamarin.EssentialsReactiveUI9.16.9
Xamarin.iOSReactiveUI.AndroidSupport9.16.9
Xamarin.MacReactiveUI9.16.9
TizenReactiveUI9.16.9
阿瓦隆尼亚Avalonia.ReactiveUI9.16.9
任何ReactiveUI.Validation9.16.9

一个引人注目的例子

假设您有一个文本字段,每当用户在其中键入内容时,您都希望发出搜索该查询的网络请求。
在这里插入图片描述

public interface ISearchViewModel
{
    string SearchQuery { get; set; }	 
    ReactiveCommand<string, IEnumerable<SearchResult>> Search { get; }
    IEnumerable<SearchResult> SearchResults { get; }
}
  

定义在什么条件下进行网络请求

我们在这里以声明的方式描述了启用搜索命令的条件。现在我们的Command IsEnabled非常高效,因为我们只是在应该更改时更新场景中的UI。

var canSearch = this.WhenAnyValue(x => x.SearchQuery, query => !string.IsNullOrWhiteSpace(query));

建立网络连接

ReactiveCommand具有对后台操作的内置支持,并保证此块只能一次运行一次,并且CanExecute将自动禁用,并且该属性IsExecuting将在其运行时进行相应设置。

Search = ReactiveCommand.CreateFromTask(_ => searchService.Search(this.SearchQuery), canSearch);

更新用户界面

ReactiveCommands本身IObservables,其值是async方法的结果,保证到达UI线程。我们将获取后台操作加载的搜索结果列表,并将它们转换为声明为的SearchResults属性ObservableAsPropertyHelper。

_searchResults = Search.ToProperty(this, x => x.SearchResults);

处理失败

从ReactiveCommand.CreateFromTask被管道传送到ThrownExceptionsObservable的任何异常。订阅允许您处理UI线程上的错误。

Search.ThrownExceptions.Subscribe(error => { /* Handle exceptions. */ });

限制网络请求和自动搜索执行行为

每当搜索查询发生变化时,我们将等待一秒钟的“死时间”,然后自动调用subscribe命令。

this.WhenAnyValue(x => x.SearchQuery)
    .Throttle(TimeSpan.FromSeconds(1), RxApp.MainThreadScheduler)
    .InvokeCommand(Search);

将我们的ViewModel绑定到特定于平台的UI

ReactiveUI完全支持XAML标记绑定,但我们还提供更多功能。ReactiveUI Bindings适用于所有平台,包括Xamarin Native和Windows Forms,并且运行相同。这些绑定是强类型的,并且重命名ViewModel属性或UI布局中的控件而不更新绑定,构建将失败。

this.WhenActivated(cleanup => 
{
    this.Bind(ViewModel, x => x.SearchQuery, x => x.TextBox)
        .DisposeWith(cleanup);
    this.OneWayBind(ViewModel, x => x.SearchResults, x => x.ListView)
        .DisposeWith(cleanup);
    this.BindCommand(ViewModel, x => x.Search, x => x.Button)
        .DisposeWith(cleanup);
});

忘记INotifyPropertyChanged样板代码

ReactiveUI.Fody包允许您使用Reactive属性修饰读写属性 - 负责属性更改通知的代码将在编译时自动注入属性设置器。我们使用Fody工具来完成这项神奇的工作。

public  class  ReactiveViewModel:ReactiveObject 
{ 
    [ Reactive ] 
     public  string  SearchQuery { get ; setter; } 
}

上面的代码被编译成以下代码:

public  class  ReactiveViewModel:ReactiveObject 
{ private string searchQuery ;
    public string SearchQuery 
    { get => searchQuery ;
        set => 这个。RaiseAndSetIfChanged(ref searchQuery,value); 
    } 
}

即时验证用户输入

ReactiveUI.Validation提供了一系列函数来创建验证,以反应方式运行。对于那些需要验证,实现ISupportsValidation的ViewModel,然后将验证规则添加到ViewModel,最后绑定到View中的验证规则!有关详细信息,请参阅文档 该软件包是基于jcmm33工作创建的,由alexmartinezm维护。

// # ViewModel
// Search query must not be empty. The selector is the property 
// name and the line below is a single property validator.
this.ValidationRule(
    vm => vm.SearchQuery,
    query => !string.IsNullOrWhiteSpace(query),
    "Please, provide a non-empty search query!");

// # View
// Bind any validations which reference the SearchQuery property 
// to the text of the QueryValidation UI control!
this.BindValidation(ViewModel, vm => vm.SearchQuery, view => view.QueryValidation.Text);

将基于视图模型的路由添加到XAML视图

Xamarin.Forms,WinRT,UWP,Windows Forms,WPF和Avalonia Desktop应用程序支持基于模型的视图路由。IScreen为视图模型创建一个注册视图,并IRoutableViewModel通过调用导航到您的s Router.Navigate。然后,将其绑定RoutingState到特定于平台的路由视图主机。有关入门指南,请参阅路由文档。

< rxui :ReactiveWindow 
    xmlns :rxui = “ http://reactiveui.net ” 
     x :Class = “ ReactiveRouting.MainWindow ”
     x :TypeArguments = “ vm:MainViewModel ”
     xmlns :vm = “ clr-namespace:ReactiveRouting ”
     xmlns = “ http ://schemas.microsoft.com/winfx/2006/xaml/presentation “
     xmlns :x = ” http://schemas.microsoft.com/winfx/2006/xaml “> 
    < rxui :RoutedViewHost 
        Router = “ {Binding Router} ”
         Horizo​​ntalContentAlignment = “ Stretch ”
         VerticalContentAlignment = “ Stretch ” /> 
</ rxui :ReactiveWindow >

该文章的来源:(https://github.com/reactiveui/ReactiveUI#make-the-network-connection)

请支持贡献者

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值