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

Question

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

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

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

Answer 1

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

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

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

removeClippedSubviews：如果为 true，则视口外部的视图将从本机视图层次结构中分离。

maxToRenderPerBatch：它是一个 VirtualizedList 属性，可以通过 FlatList 传递。这控制每批渲染的项目数量，这是每个滚动上渲染的下一个项目块。

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

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

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