React 下拉菜单中的百万选项

Question

有没有更好的方法来实现下拉菜单中的百万选项。就我而言，可能有超过一百万的用户，我需要一次选择一个用户。我有一个选择，在输入时对每个字母进行异步调用，我可以过滤用户。还有其他方法可以实现吗？如果我将所有选项绑定到下拉菜单，是否会使我的应用变慢？

Answer 1

您可以通过 2 种方式做到这一点。一个是你自己已经说过的。进行异步调用。或者你也可以用更简单的方式来做，这仍然会有巨大的性能提升。在客户端过滤一百万个项目仍然不是非常可取的。但尽管如此，这是可能的，而且我还没有看到任何重大的性能损失。

1. 使用一个状态变量来维护您要渲染的内容，并使用另一个静态变量来维护您的整个百万集合。

2. 在搜索时，您过滤那一百万个列表并将其分配给状态变量。

1. 仅渲染状态变量中的项目。

提示：确保您的过滤方法在任何时候都不会返回超过 1000 个项目，这将迫使用户输入更多字符进行搜索，并保持 UI 流畅。

Answer 2

是的，有一个很大的列表来渲染会让你的应用变慢，因为它必须在用户输入时挂载和卸载。理想情况下，客户端应使用debounce 或限制请求的方式向服务器发送请求，服务器应发送分页响应/与输入匹配的前 X 个用户。