Question

我有一个~5000个元素的列表，我想按用户给出的searchPhrase过滤它。通常用户键入过滤短语的第一个字母，然后是第二个然后是第三个。例如，用户类型'a'，然后是'ab'，然后是'abc'。

我正在尝试使用reactjs / reselect库来提高过滤性能。我在自述文件中使用了这个lib，例如： Example 我改变了这个方法：

export const getVisibleTodos = createSelector(
  [ getVisibilityFilter, getTodos ],
  (visibilityFilter, todos) => {
    switch (visibilityFilter) {
      case 'SHOW_ALL':
        return todos
      case 'SHOW_COMPLETED':
        return todos.filter(t => t.completed)
      case 'SHOW_ACTIVE':
        return todos.filter(t => !t.completed)
    }
  }
)

到那个实现：

export const getVisibleTodos = createSelector(
    [getSearchPhrase, getTodos],
    (searchPhrase, todos) => {
        return todos.filter((x) => {
            return x.firstName.indexOf(searchPhrase) >= 0;
        });
    }
)

我注意到每次用户输入下一个字母todos.length属性时都是相同的。 todos.length更长时，searchPhrase不应该缩短吗？我认为没有reactjs / reselect的表现是一样的。

当前一个todos是实际searchPhrase的子字符串时，是否有可能过滤较短的searchPhrase列表？

Answer 1

这不是重新选择如何提高性能：对于待办事项的实际过滤在重新选择或不重新选择的情况下完全相同。

重新选择是为了记住过滤：只要getSearchPhrase和getTodos返回相同的值（由===相等定义），就调用getVisibleTodos多次只过滤一次。

这在复杂的应用程序中非常重要，在这个应用程序中，您对redux状态有许多不相关的更改：如果没有重新选择状态的任何更改将导致所有选择器再次运行，即使状态的该部分未更改。

使用大型列表过滤性能

1 个答案: