什么是 RxDart - Dart 和 Flutter 中的响应式编程简介

RxDart

今年早些时候我开始尝试使用 Flutter 来开发 Android APP。过程中遇到了很多坑，但最终还是让我很惊讶。没有风险。开发原生 Android RxAndroid 代码飞快。为了找回那种熟悉的感觉，项目特意引入了RxDart。首先介绍一下RxDart是什么：RxDart基于ReactiveX，并由标准库Dart‸‸进行扩展。用于 Dart 语言的提供反应式编程的库。

如何使用

添加依赖

先在pubspec.yaml中添加依赖：

dependencies:
  rxdart: ^0.22.1+1
复制代码

示例'怎么看

dependencies:
  rxdart: ^0.22.1+1
复制代码

RxDart通过了一段代码

Observable.just(1).listen(print);
>>>1
复制代码

他们结束了我们在一起了吗？它是什么？别担心，这只是 Dart 语法的一个函数。接下来我们来分解一下上面的代码：

//创建一个被观察者
var observable = Observable.just(1);
//创建一个观察者
var observa = (int num) {
    print(num);
};
//通过listen实现订阅
observable.listen(observa);
复制代码

现在就清楚了。作为一名 Android 开发人员，我对这段代码很熟悉。就像RxJava一样！ ！ ！ ？ 从流创建：Observable(Stream.fromIterable([1, 2, 3, 4, 5])).listen(print);

Observable.periodic(Duration(seconds: 1), (x) => x.toString()).listen(print);
Future<String> asyncFunction() async {
    return Future.delayed(const Duration(seconds: 10), () => "十秒后的数据");
}
Observable.fromFuture(asyncFunction()).listen(print);
复制代码

代码输出如下：

运算符和数据转换

最有趣的事情是什么接收？当然是无处不在的运营商！我个人认为算子是Rx的灵魂。关于运算符的原理，可以从源码中阅读RxJava中map和flatMap的用法和区别。我们通过几个常用的算子来学习如何使用RxDart算子：

过滤算子

过滤算子用于过滤掉观察者发送的部分数据，丢弃数据，只保留过滤后的数据。 。

其中

长按后编辑器并不总是自动完成Filter

没有任何Filter操作的符号。幸运的是，有一个地方我们实现了一个过滤奇偶的操作：

Observable(Stream.fromIterable([1, 2, 3, 4, 5]))
      .where((num) => num % 2 == 0)
      .listen(print);
>>>2 4
复制代码

skip

如果我们想跳过前三个数字，我们可以使用skip操作符：

Observable(Stream.fromIterable([1, 2, 3, 4, 5]))
      .skip(3)
      .listen(print);
>>> 4 5
复制代码

take

相反，跳过操作，如果我们删除最后三个数字，则仅输出前两个数字：

Observable(Stream.fromIterable([1, 2, 3, 4, 5]))
      .take(2)
      .listen(print);
<<<1 2
复制代码

distinguishing

如果我们要过滤掉原始数据中的重复项：

Observable(Stream.fromIterable([1, 2, 2, 2, 3, 3, 4, 5]))
      .distinctUnique()
      .listen(print);
>>> 1 2 3 4 5
复制代码

转换运算符

过滤运算符用于转换可观察量或可观察量本身发出的一些数据，并将转换后的对象转换为我们想要的对象。

map

首先说一下map，它仍然实现了基本的数据转换，并且将计数加倍：❝的talkMap o♸‶ flatmap ，移除元素到一个由数组组成的数组中：

var list1 = [1, 2, 3];
var list2 = [4, 5, 6];
var list3 = [7, 8, 9];
var listAll = [list1, list2, list3];
Observable(Stream.fromIterable(listAll))
    .flatMap((listItem) => Observable(Stream.fromIterable(listItem)))
    .listen(print);
<<<1 2 3 4 5 6 7 8 9
复制代码

concatMap

与 flatMap 操作符类似，不同的是 concatMap 按顺序连接生成的 Observable，而不是连接那些生成的 Observable，然后生成自己的数据序列。 。看下面的代码：

var list1 = [1, 2, 3];
  var list2 = [4, 5, 6];
  var list3 = [7, 8, 9];
  var listAll = [list1, list2, list3];
  var changeConcatMap = (List<int> listItem) {
    print("concatMap开始变换了");
    return Observable(Stream.fromIterable(listItem));
  };
  var changeFlatMap = (List<int> listItem) {
    print("FlatMap开始变换了");
    return Observable(Stream.fromIterable(listItem));
  };
  Observable(Stream.fromIterable(listAll))
      .concatMap((listItem) => changeConcatMap(listItem))
      .listen(print);
  Observable(Stream.fromIterable(listAll))
      .flatMap((listItem) => changeFlatMap(listItem))
      .listen(print);
复制代码

输出为：

组合运算符

startWith

将指定项放在数据序列的开头： ❙合并❙❙您可以组合以下的输出多个可观察量就像一个观察者一样。然而，可以交错组合观察者发出的数据

Observable.merge([
    Stream.fromIterable([1, 2]),
    Stream.fromIterable([3, 4])
  ]).listen(print);
>>> 1 3 2 4
复制代码

combineLatest

当两个可观察者中的任何一个正在生成数据时，使用该函数组合每个可观察者发出的最新数据项，并根据结果，这功能传输数据。

var observable1 = Observable.just(1);
var observable2 = Observable.just(2);
Observable.combineLatest([observable1, observable2], (num) => num)
      .listen(print);
>>>[1,2]
复制代码

mergeWith

mergeWith 将多个观察者发出的流合并到单个流中。数据按照发送的顺序传递

var observable1 = Observable.just(1);
  var observable2 = Observable.just(5);
  var observable = Observable(Stream.fromIterable([1, 2, 3, 4, 5]));
  observable
      .mergeWith([observable2,observable1])
      .listen(print);
>>> 1 5 1 2 3 4 5
复制代码

结论

这只是RxDart使用的入门教程。本文不涉及RxDart的实施原则和逻辑，因为这些原则与RxJava的基本相似。

作者：白瑞德
链接：https://juejin.im/post/5d57cb25f265da03ae7872be
来源：掘金
。商业转载请联系作者获得许可。非商业转载请注明来源。