如何使用reactJS作为前端，django rest框架作为后端显示大型数据列表

我有大量烹饪所需原料的数据清单。三千多+

我使用Django rest框架作为后端，使用ReactJs作为前端

列表中的每个项目都有名称、id、测量单位、密度（单位：kg/ltr）和成本/测量单位

在Django中，我创建了一个api端点，以JSON格式提供数据

我想以表格格式显示数据，并在顶部显示搜索过滤器。同时，我希望显示最多300个结果

有人能指导我如何做到这一点吗。我应该一次获取所有列表还是从django使用分页。我应该使用单独的api进行搜索，还是在前端使用reactjs进行搜索

---

目前我在django不需要任何授权。这些数据仅供本地使用。

3000条记录需要在一块中发送到客户端。它更容易开发，但扩展性不好，可能会产生可测量的加载时间。如果您对此没有意见，并且不希望数据集增长，那么也许务实的方法是将其作为一个大列表。。。但这与最佳实践背道而驰

无论哪种方式，您都可能不想向用户显示一个巨大的3k行列表，因此UI将具有某种分页机制。这可能是“下一页”、“上一页”，也可能是无限滚动。无论哪种方式，数据抽象都应该将其视为分页数据

分页API 假设您决定让API支持分页，那么应该使用后端框架的分页功能，比如。那里有很多资源

搜索 当您决定对API进行分页时，您也承诺在后端处理搜索（过滤）。管理客户端筛选的唯一方法是，客户端可以访问所有数据。由于情况并非如此，您需要在数据请求中包含搜索筛选器。搜索和分页并不是相互排斥的，因此请确保您的API同时支持这两种功能。处理此问题的常见方法如下：

http://yoursite.com/api/ingredients?page=5&page_size=100&search=carrot

客户端 在React方面，您可以构建自己的UI（），也可以使用一个为您抽象的组件，比如或。客户端组件不应该真正关心API是否被分页。相反，它只是通知您何时显示不同的记录，其余的由您决定

如果您决定将所有内容都保存在一个大的REST调用中，那么仍然需要将数据从数组中分割出来显示。如果对API进行分页，则可以在收到的页面的客户端保留实例缓存。如果没有数据，则进行REST调用以获取数据，并用数据填充数组。这样，如果用户向前然后向后移动，您就不会重新获取

结论

---

我希望这有点帮助。享受：）

分页1-2..-10因为我的数据将不断增加，所以我应该使用Django rest框架分页。以及api url的搜索功能。谢谢。如果我是从DRF api进行搜索，是否有一种方法可以在我键入搜索时显示建议。为此，我应该从api获取整个列表。Typeahead搜索可以使用现有的分页api，只需始终获取第一页的小页面集。。。尽管这可能不够快，无法满足您的需求/UX。通常，typeahead API是一个更紧密、更狭隘的API，它只返回该功能所需的最小值。。。因此，根据专门的API搜索“ca”可能会返回字符串列表。。。像

[“胡萝卜”、“马槟榔”、“卡拉马里”、“菜籽油”]

。像这样的API通常会使用数据库索引和缓存来确保它们能够跟上用户的输入。