基于RxJS与React的fromFetch动态加载更多数据实现方案

现有实现的核心局限 #

你当前写死limit=100的fromFetch代码本质是单次执行的冷流：只要触发订阅，就会按照硬编码的参数发一次HTTP请求，既无法响应「加载按钮点击」「滚动到底部触发」这类后续交互，也没法动态调整请求参数拉取后续分页数据，完全不满足增量加载的需求。 #

核心实现思路 #

要实现动态加载能力，需要把「交互触发源」和「实际数据请求流」完全解耦：

• 用响应式的Subject作为统一的参数触发入口，不管是按钮点击、滚动检测还是其他交互事件，只要触发加载就向这个入口推送新的请求参数（比如当前已加载数量对应的offset、固定的分页limit值）
• 监听参数入口的流变化，每次收到新参数时动态拼接请求URL，通过fromFetch发起对应请求
• 对每次请求的返回结果做累计合并，把最终的完整数据集同步到React状态驱动UI更新

可直接复用的代码逻辑 #

import { fromFetch, Subject, fromEvent, merge } from 'rxjs';
import { filter, startWith, switchMap, scan, distinctUntilChanged } from 'rxjs/operators';

// 固定配置：每页拉取20条，初始加载时偏移量为0
const PAGE_SIZE = 20;
const initialQuery = {
  offset: 0,
  limit: PAGE_SIZE
};
// 统一的参数触发流：所有加载场景的触发事件最终都向这里推送新的请求参数
const queryTrigger$ = new Subject();

1. 接入各类交互触发源 #

把不同的加载触发事件统一转换成参数推送逻辑：

// 加载更多按钮点击触发
const loadMoreBtn = document.querySelector('#load-more-btn');
const btnClickTrigger$ = fromEvent(loadMoreBtn, 'click');
btnClickTrigger$.subscribe(() => {
  // currentLoadedPokemonCount 直接从累计的响应数据 pokemonList.length 获取即可
  const nextOffset = currentLoadedPokemonCount;
  queryTrigger$.next({ offset: nextOffset, limit: PAGE_SIZE });
});

// 页面滚动到底部触发
const scrollTrigger$ = fromEvent(window, 'scroll').pipe(
  // 筛选条件：滚动到距离页面底部100px时才触发加载
  filter(() => window.innerHeight + window.scrollY >= document.body.offsetHeight - 100),
  // 避免重复触发相同的滚动事件
  distinctUntilChanged()
);
scrollTrigger$.subscribe(() => {
  const nextOffset = currentLoadedPokemonCount;
  queryTrigger$.next({ offset: nextOffset, limit: PAGE_SIZE });
});

2. 构建动态请求流 #

const pokemonDataStream$ = queryTrigger$.pipe(
  // 组件挂载后自动触发首次加载，不需要等用户交互
  startWith(initialQuery),
  // 每次收到新的请求参数，动态拼URL发起fromFetch请求
  switchMap(query => {
    const requestUrl = `https://pokeapi.co/api/v2/pokemon?offset=${query.offset}&limit=${query.limit}`;
    return fromFetch(requestUrl, {
      selector: response => response.json()
    })
  }),
  // 累计合并每次返回的新数据，替换原有数据集
  scan((prevDataset, newResponse) => ({
    totalCount: newResponse.count,
    pokemonList: [...prevDataset.pokemonList, ...newResponse.results]
  }), { totalCount: 0, pokemonList: [] })
);

React 集成注意事项 #

• 必须在组件挂载时完成流订阅，组件卸载时手动调用unsubscribe清理订阅，避免内存泄漏
• 可以在流的处理逻辑里增加请求锁判断：请求发起时将锁设为true，收到响应后重置为false，避免短时间内重复触发交互导致的无效重复请求
• 累计合并后的数据集可以直接赋值给React的状态变量，自动驱动列表UI完成增量更新

内容的提问来源于stack exchange，提问作者Chazzy97