响应式编程探秘（Reactive Programming）

最新推荐文章于 2024-07-08 10:40:46 发布

ikkkp

最新推荐文章于 2024-07-08 10:40:46 发布

阅读量132

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/ikkkp/article/details/132656244

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

响应式编程？

响应式编程（Reactive Programming）是一种编程范式，用于处理异步数据流和事件处理。它旨在简化异步数据流的管理和操作，使开发人员更容易构建具有高度响应性和可维护性的应用程序。响应式编程的核心思想是将数据和事件视为持续的流，而不是离散的事件或状态变化。

以下是响应式编程的一些关键概念和特点：

Observable（可观察对象）：在响应式编程中，数据流被抽象为可观察对象（Observable），它可以发出值序列，而开发人员可以订阅这些值的变化。这些值可以是来自用户界面、网络请求、传感器数据等的事件流。
Observer（观察者）：观察者是订阅可观察对象的组件或函数，它们会在可观察对象发出新值时收到通知，并可以执行相应的操作来响应这些值的变化。
Operators（操作符）：操作符是用于处理和转换可观察对象中的值流的函数，它们可以用于过滤、映射、合并、转换等操作，以便更好地控制数据流。
响应性调度器：响应式编程通常使用调度器来控制何时和在哪个线程上执行可观察对象的操作，以确保不会阻塞主线程并提高性能。
异步性：响应式编程非常适合处理异步操作，例如处理用户输入、处理网络请求、处理文件I/O等。它通过将这些异步操作表示为数据流，使得代码更加清晰和可维护。

响应式编程的流行实现包括RxJS（JavaScript中的响应式扩展库）、ReactiveX、Project Reactor（用于Java和Spring应用程序）、Kotlin的Flow等。这些库提供了一套丰富的操作符和工具，以便开发人员更轻松地构建响应式应用程序。

观察者模式呈现的响应式编程？

举个例子吧

在面向对象编程语言中，响应式编程通常以观察者模式呈现。

我们把处理和发出事件的主体称为 Reactor，它可以接受事件并处理，也可以在处理完事件后，发出下一个事件给其他 Reactor。两个 Reactors 之间没有必然的强耦合，他们之间通过消息管道来传递消息。Reactor 可以定义一些事件处理函数，根据接收到的事件不同类型来进行不同的处理。如果我们的系统复杂，我们还可以专门定义不同功能类别的 Reactors，分别处理不同类型的事件。而在每个 Reactor 中对事件又进行细分处理。

Reactor 的作用其实就是我们最常见的 eventHandler，是事件接收方和处理方。通常 Reactor 的数量可以是预先定义的，因为一个系统，我们通常可以约定它处理哪些预定义的事件，比如有处理网络连接的 Reactor，处理日志收集的 Reactor，处理数据存储的 Reactor 等等，各司其职。而错误（未定义）事件则可以单独放在一个专门处理 Error/Exception 的 Reactor 中。

通过事件管理器，每个 Reactor 可以根据要发出或者接收的消息，临时的创建一个线程去执行响应的操作。发出和接收消息可以根据业务的复杂度，分开单独线程，也可以放在一个线程。这样的设计架构简单而清晰。

当涉及响应式编程时，常见的例子是处理用户界面事件或异步数据流。以下是一个使用RxJS（JavaScript的响应式扩展库）的示例，演示如何在Web页面上处理按钮点击事件的响应式方式：

// 导入RxJS库
import { fromEvent } from 'rxjs';
import { map, throttleTime } from 'rxjs/operators';

// 获取按钮元素
const button = document.getElementById('myButton');

// 创建一个可观察对象，监视按钮点击事件
const buttonClicks = fromEvent(button, 'click');

// 使用操作符处理点击事件流
buttonClicks.pipe(
  throttleTime(1000), // 在1秒内仅允许一次点击事件
  map(event => event.target.textContent) // 获取按钮上的文本内容
)
.subscribe(text => {
  console.log(`按钮点击: ${text}`);
});

在这个示例中，我们执行了以下操作：

导入了RxJS库，并引入了一些常用的操作符。
获取了一个HTML按钮元素。
创建了一个可观察对象 buttonClicks，该对象会监视按钮的点击事件。
使用 throttleTime 操作符，我们确保在1秒内只处理一次点击事件，以防止过于频繁的点击。
使用 map 操作符，我们从点击事件中提取按钮上的文本内容。
最后，我们通过 subscribe 方法订阅了可观察对象，以便在每次按钮点击时打印按钮上的文本内容到控制台。

这个例子展示了如何使用RxJS来处理按钮点击事件的响应式方式。当用户点击按钮时，事件会以响应式的方式传递，被操作符处理，并在控制台上输出。这种方法使得事件处理更加清晰、可维护，并且可以轻松地处理异步操作。