javascript - 关于 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 -app 中，您应该跟踪您获取的最新索引，当您到达页面末尾时，您将添加到索引并获取更多帖子。我在这里粘贴了 block 的简约代码库来实现这一点，在 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