如何修复Redux中可排序可编辑列表的性能

时间:2018-06-26 05:42:29

标签: reactjs redux reselect

我的List渲染了许多ListItems(使用react-list来减少页面上的数字)。

ListItems具有可编辑的文本区域,可在每次按键时更新我的​​redux存储区的listItems部分。

List根据某些排序标准在ListItem中获得mapStateToProps个ID的数组。它会重复执行多次此操作,因为state.listItems每次按键更新。

我尝试使用reselect来消除重复,但是考虑到state.listItems是选择器的输入之一,由于每次按键都在变化,它实际上并未缓存。为了在每次按键时与之抗争,我现在通过所有ListItem进行映射并获取它们的ID(以及排序标准所需的其他一些东西),然后将其传递给执行deepEquals check的选择器,然后进行排序和缓存。

这可以提高性能,但是在输入非常大的列表时仍然有些滞后。

问题在于,每个按键上的所有ListItems仍在映射。

我唯一想到的解决方案是将ListItem ID数组保留在商店中的其他位置,并且每次添加或删除ID时都必须保持最新。但这似乎很烦人,因为它实际上是衍生数据。或将我的textarea从商店中分离出来,使其成为不受控制的输入,以便它不那么频繁地更新商店。这并不理想,因为还有其他一些事情正在侦听那些需要在用户键入时更新的更改。

我还看到了一些其他类似的问题,涉及对对象数组使用重选,但是没有答案似乎有合适的解决方案。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

也许一种解决方案可能是debounce您的输入按键事件处理程序。