reactjs - 通过用户搜索处理从列表中排除项目的最佳方法是什么？

Question

假设我有一个项目列表，用户可以搜索该列表。该列表最多包含大约 100 个项目，所有数据在运行时都存在，因此在搜索时不需要发出 ajax 请求来获取新的列表项，我只需要过滤搜索词的所有现有项目。

如果我只是添加隐藏与搜索不匹配的列表项的类，性能会更好，还是在渲染方法中只渲染与搜索匹配的项目会更好。假设最初没有搜索并且所有项目都在装载时呈现，是否会因为它们与装载后的用户搜索词不匹配而删除项目比仅仅添加一个类来隐藏这些项目更昂贵？

项目上有点击处理程序，以防万一。

由于列表最多只有 100 个项目，我宁愿通过一个类隐藏它们，但不确定这是否真的是反应方式。

标签： reactjs

Answer 1

我会重新渲染结果列表以仅显示列表中的匹配项。

隐藏不匹配的结果有几个缺点：

• 一个臃肿的 html 包含多达 100% 的项目，display: none以防搜索没有结果......
• 它可能更昂贵，因为您要重新渲染 html 以应用 css 类来隐藏项目

React 在更新 dom 方面很聪明，所以告诉他要隐藏哪些项目并不是真正的“反应方式”。只需发送新的项目列表，其中每个项目都有适当的密钥。