如何在应用程序本身中进行昂贵的操作，例如在 React Native 中的大列表中搜索？

问题描述

我有一个包含 10000 条记录的 json，我需要将其显示在 Flatlist 中。我正在使用一个工作正常的虚拟化列表。现在我有某些过滤器，点击后应该过滤掉 json 并使用新数据。我只是过滤掉数据。

const filters = foo1;
const largeList = [{ id:1,foo:'foo1',bar:10 },{id:2,bar:20} ...]
const filteredList = largeList.filter(l=>l.foo === filters && l.bar > 10);

过滤器是动态的，这会滞后于我的应用程序，因为它会给 UI 线程带来压力。我已经使用了 InteractionManager.runafterinteractions() 但这在这种情况下不起作用。如何在不阻塞 UI 线程的情况下在应用中执行如此昂贵的操作？

解决方法

如果您不能将过滤器委托给后端，那么获得更好性能的最佳方法是将 .filter 替换为 for 循环。

网上有很多页面证明 for 循环比数组函数快得多。 (https://javascript.plainenglish.io/are-for-loops-better-than-arrays-filter-or-foreach-methods-f54b6880d201)

此外，您需要评估您的 Flatlist 的更好配置：

removeClippedSubviews： 如果为 true，则视口之外的视图将从原生视图层次结构中分离。

ma​​xToRenderPerBatch： 它是一个可以通过 FlatList 传递的 VirtualizedList 道具。这控制着每批渲染的项目数量，这是在每次滚动时渲染的下一个项目块。

updateCellsBatchingPeriod： 虽然 maxToRenderPerBatch 表示每批渲染的项目数量，但设置 updateCellsBatchingPeriod 会告诉您的 VirtualizedList 批次渲染之间的延迟（以毫秒为单位）（您的组件渲染窗口项目的频率）。

纯组件： 对您的组件实施更新验证。 React 的 PureComponent 通过浅层比较实现了 shouldComponentUpdate。这在这里很昂贵，因为它需要检查您的所有道具。如果您想要良好的位级性能，请为您的列表项组件创建最严格的规则，仅检查可能会更改的道具。如果您的列表足够基本，您甚至可以使用。 （React.memo 可能是一个很好的解决方案）

来源：https://reactnative.dev/docs/optimizing-flatlist-configuration