有没有更好的方法可以在无限滚动的网页上呈现获取的提要数据？

Question

我正在ReactJS中创建一个网页，用于发布帖子（包含文本、图像、视频），就像无限滚动的Reddit一样。我创建了一个帖子组件，将为其提供所需的数据。我正在使用 axios 从 MySQL 获取多个帖子。另外，我在我的项目中实现了 redux store。

我还添加了投票后功能。目前，我将 db 中的所有帖子存储在 redux 存储中。如果用户投赞成票或反对票，该更改将保存在 redux 存储和数据库中，并且网页将轻松重新渲染该元素。

为此使用 redux-store 是否可行，因为数据很快就会增加，可能会达到数百万甚至更多？

我之前使用 useState hook 来存储所有数据。但这样我就遇到了动态重新渲染的问题，因为每次用户投票时我都必须设置状态。

如果大家有什么有效的方法，请帮忙。

Answer 1

这个问题似乎远远超出了一个主题。让我们将其分解为主要部分：

1. 客户端状态。您说您当前正在使用 redux 来存储帖子并在点赞数发生变化时更新它。问题是，这种状态实际上并不是您的情况（或至少是大部分情况）的状态。将来自 API 的任何数据视为状态是一种常见的误解。在大多数情况下，它不是一个状态，而是一个缓存。您需要一个可以更轻松地使用缓存的工具。我建议尝试像 react-query 或 swr 这样的东西。这样您将避免大量样板代码并将服务器数据缓存管理移交给库。
2. 无限滚动。这里有一些事情需要考虑。首先，您需要弄清楚如何检测何时预加载更多帖子。您可以使用 IntersectionObserver 来完成此操作。或者您可以使用 NPM 中的一些功能库来为您完成此操作。其次，如果您的目标是数百万条记录，则需要考虑虚拟化。简而言之，它从 DOM 中删除视口之外的元素，这样浏览器就不会耗尽所有内存，并在一段时间的末日滚动后死掉（这将是一个很好的功能）。本文将是一个很好的起点：https://levelup.gitconnected.com/how-to-render-your-lists-faster-with-react-virtualization-5e327588c910。
3. 数据来源。您说您将所有帖子存储在数据库中，但没有提及任何 API 层。如果您的目标是数百万美元，并且这不仅仅是一个练习技能的项目，我建议在客户端应用程序和数据库之间使用 API。这里有一些很好的问题，您可以从中找出为什么直接从客户端连接到数据库不是最好的主意：one，two。