javascript - 大型列表的过滤性能

Question

我有一个约 5000 个元素的列表，我想通过用户给出的 searchPhrase 对其进行过滤。 通常用户输入过滤短语的第一个字母，然后输入第二个字母，然后输入第三个字母。 例如，用户输入 'a'，然后输入 'ab'，然后输入 'abc'。

我正在尝试使用reactjs/reselect库来提高过滤性能。 我已经使用了这个库，如自述文件中的示例所示: 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 属性都是相同的。 当 searchPhrase 较长时，todos.length 不应该更短吗？ 我认为没有reactjs/reselect的性能是一样的。

当前面的 searchPhrase 是实际 searchPhrase 的子字符串时，是否可以过滤较短的 todos 列表？

Answer 1

这并不是重新选择提高性能的方式:无论是否重新选择，待办事项的实际过滤所花费的时间完全相同。

重新选择为您所做的是记住过滤:只要 getSearchPhrase和getTodos返回相同的值(由 === 相等定义)，调用 getVisibleTodos多次过滤只过滤一次。

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