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保存的集合加载的静态列表。

使用price＆amp; amp;过滤此过滤器的最佳方法是什么？小组过滤器？

我的第一个想法是在父组件的状态下保留另一个名为“filtered_list”的数组，当过滤器更改时，filtered_list将通过过滤父集合重新构建（再次循环100,000+对象）。

但这看起来并不那么高效，所以我认为可能应该编写一些逻辑来判断新过滤器应该使用已经filtered_list还是使用父collection

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

这让我想到另一个问题..我应该在哪里维护filtered_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是一个用于创建memoized，可组合的简单库选择器功能。重选选择器可以有效地使用计算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更改时才会重新计算选择器。我过去也将重新选择与ImmutableJS状态结合起来，根据我的经验，在查询大型数据结构时提高了性能。

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

1 个答案: