关于 React.js 和 Material_ui 中的无限滚动

Question

我正在使用react.js 进行项目

对于该项目，我应该包括像 Facebook 一样具有无限滚动功能的板

对此，我有一个问题。

当我滚动看板并回忆起更多帖子（例如 Facebook）时，它是否有效

是否仅在帖子底部绘制附加帖子或

它调用整个列表并重新绘制它

ex) case 1 :  {1,2,3} > scroll > {1,2,3} + {4,5} (additional posts)
    case 2 :  {1,2,3} > scroll > {1,2,3,4,5} (whole posts)

如果我做案例1，我想要知道如何做。

谢谢！

Answer 1

你绝对应该更喜欢第一种方法。当您从 api 获取数据时，它将使您能够拥有更小的负载大小，并总体上提供更流畅的用户体验。

假设您的 api 已经为您提供了一种posts在特定索引范围内获取数据的方法，示例https://myapi.com/posts?start=0&end=10将返回您第 10 篇帖子的列表。

在你的 React.js 应用程序中，你应该跟踪你获取的最新索引，当你到达页面末尾时，你添加到索引并获取更多帖子。我在这里粘贴了块的简约代码库来实现这一点，在CodeSandbox上工作演示

// Store current index of posts
const [startIndex, setStartIndex] = React.useState(0);

const LoadMorePosts = () => {
  // Load 10 more
  setStartIndex(prev => prev + 10);
};

React.useEffect(() => {
  (async () => {
    // Add search range to url
    const url = `?start=${startIndex}&end=${startIndex + 10}`;
    const posts = await mockApi(url);
    // Append new posts to end of old ones
    setPosts(prev => [...prev, ...posts]);
  })();
}, [startIndex]); // Run this effect when startIndex changes