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

我正在使用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，我想知道怎么做

---

谢谢

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

让我们假设您的api已经为您提供了一种方法来获取特定索引范围内的

posts

，例如

https://myapi.com/posts?start=0&end=10

将返回包含10篇第一篇文章的列表

在React.js-app中，你们应该跟踪你们获取的最新索引，当你们到达页面末尾时，你们可以添加到索引中，获取更多的帖子。为了实现这一点，我在这里粘贴了用于块的最低限度代码库，并在上面进行了演示

---

如果列表中有一百万个内容，用户向下滚动，那么最终页面上将有一百万个内容，浏览器将崩溃（可能更早）。与其让你的生活变得更困难，何不使用。我想这也是facebook改成的wat，这样你就不会在某个时候渲染太多的项目。如果你继续加载更多的帖子，那么最终你会渲染太多的元素并导致浏览器崩溃。我认为facebook已经把他们的“无限列表”改成了一个我不认为问题在于如何呈现长长的项目列表，而是如何实际实现并继续处理文章中提到的第一个案例。是的，有各种库可以让你解决在浏览器中呈现大型数据集的问题，例如&，它们都有自己的解决方案来实现无限加载。我之所以这么说，是因为加载更多是糟糕的设计，最终会呈现太多的元素。因此，即使OP要求这样做，也不意味着这是最好的解决方案。如果OP问从高楼上跳下来的最佳方式是什么，你不会回答“像球一样高，大声喊着Yoloooo”，你可能会建议电梯或楼梯。这绝对不是“糟糕的设计”，这完全取决于你在渲染什么。最后，如果遇到瓶颈，只需将列表组件替换为react虚拟化或react窗口。为什么要在他们出现之前考虑所有不同的问题？只是为了以防万一，对每一个可能的步骤都进行设计？

// 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