通过用户搜索处理列表中的项目的最佳方法是什么?

时间:2018-05-18 08:53:17

标签: reactjs

假设我有一个项目列表,用户可以搜索列表。该列表最多只能包含运行时所有数据的100个项目,因此在搜索时不需要进行ajax请求以获取新的列表项,我只需要过滤搜索项的所有现有项。

如果我只添加隐藏与搜索不匹配的列表项的类,或者在渲染方法中仅渲染与搜索匹配的项目会更好吗?假设最初没有搜索并且所有项目都是在mount上呈现的,那么因为它们与mount用户搜索术语不匹配而不仅仅是添加一个类来隐藏这些项目,所以不会删除项目吗?

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

由于列表最多只能包含100个项目,我宁愿通过课程隐藏它们,但我不确定这是否真的是反应方式。

1 个答案:

答案 0 :(得分:1)

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

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

  • 如果搜索没有结果,则display: none中包含最多100%项目的臃肿html ...
  • 它可能更昂贵,因为您重新渲染html以便应用css类来隐藏项目

React在更新dom方面很聪明,所以它并不是真的"反应方式"告诉他要隐藏哪些物品。只需使用每个项目的propre键发送新的项目列表。