反应性无限卷轴-DEV365 开发者社区

在尝试加载大量数据时，您是否曾经在网页上经历过缓慢的加载或滞后？如果是这样，您并不孤单。改善体验的有效解决方案是使用无限滚动，该滚动类似于您的Twitter在向下滚动时如何连续加载更多的推文。

What is Infinity Scroll

一种网页设计技术，当用户向下滚动页面时，更多内容会自动且连续地加载在底部，从而消除了用户需要单击下一页的内容。

向下滚动以滚动到result或see the complete code

问题

无限滚动通常出于一些关键原因：

数据获取：一次加载大数据集都可能导致延迟问题，甚至浏览器崩溃。
移动可用性：在移动平台上，滚动比在多个页面上导航更直观。
资源优化：增量数据加载通常更具资源效率，可以减少服务器和客户端的负载，这可以导致更快的负载时间和更好的用户体验。

解决方案

您将使用RXJS构建最小而高效的功能。它将包括：

支持垂直滚动
LTR和RTL的水平滚动支持
确定何时获取更多数据的阈值
Loading state

写作假设您对RXJ有基本的理解。不过，不用担心，我将在此过程中解释任何特殊的代码或RXJS功能。因此，请准备好，因为您将要潜入一些RXJS操作员！ ð

对于那些已经适应RXJ，you can skip the next section或jump to The Code

的人

好吧，让我们开始！

入门

您唯一需要开始的是RXJ。使用此命令安装它：

npm i rxjs

注意：我主要使用打字稿来清晰显示通过类型可用的选项。您可以自由省略它们，但是如果您想使用类型，我建议您选择一个具有内置打字稿支持的框架。

RXJS操作员

RXJS运算符是操纵和转换可观察到的序列的函数。这些操作员可用于过滤，组合，投影或执行可观察到的事件序列的其他操作。

常见的RXJS操作员

有很多，大多数（由我使用）是tap，map，filter，switchMap和finalize。您可能已经知道如何使用这些，但是幸运的是，我们将了解其他有用的操作员！

看以下可观察的内容：

const source$ = from([1, 2, 3, 4, 5]);
source$.subscribe(event => console.log(event));

结果将是1 2 3 4 5.-在新线路中播放 -

筛选

仅记录奇数

const source$ = from([1, 2, 3, 4, 5]);
source$
  .pipe(filter(event => event % 2))
  .subscribe(event => console.log(event));

说，source$可能会发出null值。您可以使用filter阻止它通过其余序列。

const source$ = from([1, 2, 3, null, 5]);
source$
  .pipe(filter(event => event !== null))
  .subscribe(event => console.log(event));

地图

要更改事件的顺序，您可以使用map操作员。

source$
  .pipe(map(event => (event > 3 ? `Large number` : "Good enough")))
  .subscribe(event => console.log(event));

如果我想检查事件而不更改源序列

该怎么办

轻敲

source$
  .pipe(
    tap(event => {
      logger.log("log an event in the console");
      // you can perform any operation as well, however return statment are ignore in tap function
    })
  )
  .subscribe(event => console.log(event));

最终确定

要监视可观察到的生命周期的末端，您可以使用finalize操作员。可观察到的完成后，它会触发。

例如，它通常用于执行一些清理操作，停止加载动画或调试内存，例如，添加日志语句以确保可观察到的可观察到完整并且不会粘在内存中。

debouncetime

想象一下，您正在构建登录表单，并且在输入其密码的用户时，您要击中后端服务器以确保密码符合某些条件。

condt source$ = fromEvent(passwordInput, 'input').pipe(
  map((event) => passwordInput.value),
  switchMap((password) => checkPasswordValidaity(password))
)
source$.subscribe(event => console.log(event));

此示例可能会与一个关键警告一起工作；在每次击键上，都会向后端服务器发送请求，这要归功于switchMap，它将取消以前的请求，因此可能不会造成太大的损害，但是，使用debounceTime，您可以忽略input事件，直到dueTime -argument-- argument-通过。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< br>

const source$ = fromEvent(passwordInput, 'input').pipe(
  debounceTime(2000)
  map((event) => passwordInput.value),
  switchMap((password) => checkPasswordValidaity(password))
)
source$.subscribe(event => console.log(event));

添加debounceTime本质上意味着在每种键手术之间创建2秒钟，因此用户输入“ Hello”，然后在2秒之前进入“ World”，并且只会发送一个请求。换句话说，每个事件必须距离上一个事件有2秒的距离。

从...开始

可观察的可能没有立即具有价值，您需要一个可用于新的source$订户的事件。

const defaultTimezone = '+1'
condt source$ = fromEvent(timezoneInput, 'input').pipe(
  map((event) => timezoneInput.value),
  startWith(defaultTimezone)
)
source$.subscribe(event => console.log(event));

即使从未输入timezoneInput值，该示例也会立即记录“ +1”

fromevent

您可以将上一个示例重写如下

const timezoneInputController = new Subject<string>();
const timezoneInputValue$ = timezoneInputController.asObservable();
timezoneInput.addEventListener("input", () =>
  subject.next(timezoneInputController.value)
);

const source$ = timezoneInputValue$.pipe(
  map(event => event.target.value),
  startWith(defaultTimezone)
);
source$.subscribe(event => console.log(event));

多亏了RXJS，您可以使用fromEvent封装样板，您需要做的就是说要聆听哪个事件以及从哪些元素中聆听。当然，fromEvent返回可观察的ð

情况

我承认这可能很难消化，这是对我的。以相同的上一个示例为例，假设您有一个表单，输入和提交按钮。当用户单击“提交”按钮时，您要停止收听timezoneInput Element input事件。是的，takeUntil听起来时，它可以让订户采取事件，直到提供的可观察到的发射至少一次为止。

const formSubmission$ = fromEvent(formEl, 'submit')

const defaultTimezone = '+1'
condt source$ = fromEvent(timezoneInput, 'input').pipe(
  map((event) => timezoneInput.value),
  startWith(defaultTimezone)
)
// normally, this subscriber will keep logging the event even if the users clicked on the submit button
source$.subscribe(event => console.log(event));

// Now, once the submit button are clicked the subscriber subscription will be canceled
source$
  .pipe(takeUntil(formSubmission))
  .subscribe(event => console.log(event));

管道

RXJS中的管道函数是用于在可观察物上组成操作的实用程序。使用它以可读的方式将多个操作员链在一起，或创建可重复使用的自定义操作员。当源序列要复杂时，这至关重要。

import { pipe } from "rxjs"; // add it to not to be confused with Observable.pipe

// Create a reusable custom operator using `pipe`
const doubleOddNumbers = pipe<number>(
  filter(n => n % 2 === 1),
  map(n => n * 2)
);

const source$ = from([1, 2, 3, 4, 5]);

source$.pipe(doubleOddNumbers).subscribe(x => console.log(x));
// result: 1, 6, 10

平坦的操作员

有时，您需要在每个传入的事件中获取一些数据，例如后端服务器。有几种方法可以做到。

switchmap

像常规地图一样，switchMap运算符使用一个项目函数，该项目函数返回可观察到的第一个参数 - 被称为内部观察值。当发生事件时，switchMap会订阅此内部可观察的可观察，创建订阅，该订阅持续到内在可观察到完成为止。如果新事件在上一个内部观察到完成之前到达，则switchMap取消现有订阅并开始新的订阅。换句话说，它切换到新订阅。

问题

解决方案

入门

RXJS操作员

常见的RXJS操作员

筛选

地图

轻敲

最终确定

debouncetime

从...开始

fromevent

情况

管道

平坦的操作员

switchmap

辅助图

合并

排气板

滚动API

滚动和滚动事件

车轮事件

尺寸属性

代码

确保滚动

fetchdata

使用Mergemap

使用switchmap

使用ConcatMap

使用ExaustMap

例子

垂直滚动

水平滚动

RTL水平滚动

UX和可访问性考虑

其他分页策略

下一步

概括

资源