有没有更好的方法可以在无限滚动的网页上呈现获取的提要数据？
Is there any better way to render the fetched feed data on webpage with infinite scrolling?
我正在 ReactJS 中为 post 提要（包含文本、图像、视频）创建一个网页，就像 Reddit 一样，可以无限滚动。我创建了一个 post 组件，它将提供所需的数据。我正在使用 axios 从 MySQL 中获取多个 post。另外，我在我的项目中实现了 redux store。
我也添加了 post 投票。目前，我将 db 中的所有 post 存储在 redux 存储中。如果用户赞成或反对，该更改将在 redux 存储和数据库中，并且网页会轻松地重新呈现元素。
使用 redux-store 是否可行，因为数据很快就会增加，可能会增加数百万甚至更多？
我之前使用useState hook来存储所有的数据。但是我遇到了动态重新渲染的问题，因为每次用户投票时我都必须设置状态。
哪位大侠有什么有效的方法，请指教
看来这个问题远远超出了一个话题。让我们把它分解成主要部分：
- 客户端状态。你说你目前正在使用 redux 来存储帖子并在它发生变化时更新 upvotes 的数量。问题是这种状态实际上并不是您的情况（或至少大部分情况）。这是对待来自 API 状态的任何数据的常见误解。在大多数情况下，它不是状态，而是缓存。而且您需要一个工具来简化缓存的工作。我建议尝试像 react-query or swr 这样的东西。这样您将避免大量样板代码并将服务器数据缓存管理移交给库。
- 无限滚动。这里有几件事需要考虑。首先，您需要弄清楚如何检测何时预加载更多帖子。您可以使用 IntersectionObserver. Or you can use some fance library from NPM that does it for you. Second, if you aim for millions of records, you need to think about virtualization. In a nutshell, it removes elements that are outside of the viewport from the DOM so browsers don't eat up all memory and die after some time of doomscrolling(that would be a nice feature tho). This article would be a good starting point: https://levelup.gitconnected.com/how-to-render-your-lists-faster-with-react-virtualization-5e327588c910.
- 数据源。您说您正在将所有帖子存储在数据库中，但没有提及任何 API 层。如果您的目标是数百万美元，并且这不是一个仅用于练习技能的项目，我建议在客户端应用程序和数据库之间设置一个 API。这里有一些很好的问题，您可以从中找出为什么直接从客户端连接到数据库不是最好的主意：one, two.
我正在 ReactJS 中为 post 提要（包含文本、图像、视频）创建一个网页，就像 Reddit 一样，可以无限滚动。我创建了一个 post 组件，它将提供所需的数据。我正在使用 axios 从 MySQL 中获取多个 post。另外，我在我的项目中实现了 redux store。
我也添加了 post 投票。目前，我将 db 中的所有 post 存储在 redux 存储中。如果用户赞成或反对，该更改将在 redux 存储和数据库中，并且网页会轻松地重新呈现元素。
使用 redux-store 是否可行，因为数据很快就会增加，可能会增加数百万甚至更多？
我之前使用useState hook来存储所有的数据。但是我遇到了动态重新渲染的问题，因为每次用户投票时我都必须设置状态。
哪位大侠有什么有效的方法，请指教
看来这个问题远远超出了一个话题。让我们把它分解成主要部分：
- 客户端状态。你说你目前正在使用 redux 来存储帖子并在它发生变化时更新 upvotes 的数量。问题是这种状态实际上并不是您的情况（或至少大部分情况）。这是对待来自 API 状态的任何数据的常见误解。在大多数情况下，它不是状态，而是缓存。而且您需要一个工具来简化缓存的工作。我建议尝试像 react-query or swr 这样的东西。这样您将避免大量样板代码并将服务器数据缓存管理移交给库。
- 无限滚动。这里有几件事需要考虑。首先，您需要弄清楚如何检测何时预加载更多帖子。您可以使用 IntersectionObserver. Or you can use some fance library from NPM that does it for you. Second, if you aim for millions of records, you need to think about virtualization. In a nutshell, it removes elements that are outside of the viewport from the DOM so browsers don't eat up all memory and die after some time of doomscrolling(that would be a nice feature tho). This article would be a good starting point: https://levelup.gitconnected.com/how-to-render-your-lists-faster-with-react-virtualization-5e327588c910.
- 数据源。您说您正在将所有帖子存储在数据库中，但没有提及任何 API 层。如果您的目标是数百万美元，并且这不是一个仅用于练习技能的项目，我建议在客户端应用程序和数据库之间设置一个 API。这里有一些很好的问题，您可以从中找出为什么直接从客户端连接到数据库不是最好的主意：one, two.