大列表的过滤性能

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

这不是重新选择提高性能的方式：待办事项的实际过滤在有或没有重新选择的情况下花费的时间完全相同。

reselect 为您做的是记住过滤：只要 getSearchPhrase 和 getTodos return 相同的值（由 === 相等定义），多次调用 getVisibleTodos 只过滤一次。

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

大列表的过滤性能

Filtering performance with large lists

javascript

redux

react-redux

reselect