时间戳

首页 > 解决方案 > ReactNative 渲染嵌套列表慢：建议

react-native - ReactNative 渲染嵌套列表慢：建议

问题描述

JSON结构：

sectionItems={key: ..., name: .., title: ..listOf 20 nested data }

data = 
  {
    "sections": [...sectionItems of 50 items]
  }

When displaying in the FlatList its rendering too slow,

<FlatList
  renderItem={({item}) => <Section item={item} />}
  initialNumToRender={lastSelectedItemIndex}
/>

FlatList之前有使用SectionList渲染数据，但是渲染数据太慢，要求是一次显示所有的内容，但是FlatList在viewport中加载item需要太多时间，显示更多的空白。

渲染嵌套列表、SectionList 或 FlatList 的最佳解决方案是什么，列表应该突出显示所选项目，所以我也需要连接到存储。

标签： react-native

解决方案

我只是通过嵌套平面列表并在列表项中进行适当的渲染来做到这一点。例如，我有一个日期列表，并且每天都有“条目”。我有一个包含“天数列表”的平面列表，而不是部分列表。日期列表显示新一天的列表标题，例如 1 月 14 日。此列表项的其余部分是一个平面列表，包含此列表的所有条目。您可以通过将特定列表项包裹在可触摸的内容中来轻松突出显示。我必须一次渲染 1000 个元素，并且除了同步过程之后的大量更新之外，从未遇到过性能问题。我认为这种方法可能最适合您。

推荐阅读