Reactjs 过滤大量对象的最佳实践

Question

在给定的应用程序中，假设我有一个包含 100,000 多个对象的数组。

对象如下所示

let collection = [{
  name:'name',
  price: 10,
  group_id: 1
},
{
  name:'name 2',
  price: 8,
  group_id: 2
},
];

现在假设我有一个显示所有 100,000 个对象的视图，并允许用户按价格范围或 group_id 过滤列表。

--假设这样的列表可以是从远程 json 加载的静态列表，也可以是 redux 保存的集合。

使用价格和组过滤器过滤此过滤器的最佳方法是什么？

我的第一个想法是在父组件的状态下保留另一个名为“filtered_list”的数组，当过滤器发生变化时，filtered_list 将通过过滤父 Collection 来重建（再次循环 100,000+ 个对象）。

但这看起来不是那么高效，所以我认为我应该编写一些逻辑来决定新过滤器是否应该使用已经 filtered_list 或使用父 collection

示例：- 如果 group_filter 是 group_id = 1，那么添加了价格过滤器，那么我应该只过滤过滤列表，因为 group_1 的所有输入都已经在过滤列表中，否则如果 group_id 从 1 -> 2 更改，那么我必须重新过滤整个大集合，因为 filters_list 不包含 group_id =2 项，它只在集合中......

这给我带来了另一个问题.. 我应该在哪里维护 filters_list 变量？

如果我将它添加到 redux 存储，这违反了 redux 的原则，即存储应该只保存构建数据所需的信息，而不是计算数据。

const App = props =><div>
<aside>
 <Filtes />
</aside>
<article>
  {props.collection.map(item=><label>item.name</label>)}
</article>
</div>

export default connect( ({collection})=>({collection}) )(App)

Answer 1

我一直在使用 Redux 文档中推荐的 reselect 库来计算派生数据：

Reselect 是一个简单的库，用于创建可记忆的、可组合的 选择器功能。重新选择选择器可用于有效地 从 Redux 存储计算派生数据。

http://redux.js.org/docs/recipes/ComputingDerivedData.html

所以你可以有一个看起来像这样的选择器：

const getGroupdId= state => state.selectedGroupId
const getIteams = state => state.collection

const getVisibleItems= createSelector(
  [getItems, getGroupId],
  (items, groupId) =>
    items.filter(i=> i.group_id === groupId)
)

由于选择器被丢弃，因此在所选的GroupID更改时才会重新计算。过去，我还将 reselect 与 ImmutableJS 状态结合起来，根据我的经验，这在查询大型数据结构时提高了性能。