我有一个列表,只是简单的文本,渲染成flatlist上的React原生,但我遇到了非常非常慢的性能,使应用程序无法使用。
我该如何解决这个问题?我的代码是:
<FlatList
data={[{key: 'a'}, {key: 'b'} ... +400]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
我有一个列表,只是简单的文本,渲染成flatlist上的React原生,但我遇到了非常非常慢的性能,使应用程序无法使用。
我该如何解决这个问题?我的代码是:
<FlatList
data={[{key: 'a'}, {key: 'b'} ... +400]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
6条答案
按热度按时间eqfvzcg81#
以下是我的建议:
A.避免
renderItem
prop 上的匿名箭头函数。将
renderItem
函数移出到render函数的外部,这样它就不会在每次调用render函数时重新创建自己。**B.尝试在您的
FlatList
上添加initialNumToRender
prop **它将定义第一次渲染多少项,它可以保存一些具有大量数据的资源。
C.在Item组件上定义
key
属性简单地说,它将避免在每个项目上定义
key
的动态添加/删除项目上重新呈现。确保它是唯一的,不要使用index
作为密钥!您也可以使用keyExtractor
作为替代方案。D.可选优化
尝试使用
getItemLayout
跳过动态内容的测量。另外还有一些名为maxToRenderPerBatch
,windowSize
的 prop ,您可以使用它们来限制渲染的项目数量。请参阅VirtualizedList或FlatList的官方文档。E. Talk is Cheap,show me the code!
6ss1mwsb2#
优化平面列表的一个简单方法是使用React.memo。用技术术语来说,它基本上是对数据进行浅层比较,并检查它们是否需要重新渲染。
创建一个文件,如ListComponent.js,并将renderItemJSX添加到其中,然后将其添加到renderItem中。
这是您的FlatList
uurv41yg3#
试试这个listview https://github.com/Flipkart/ReactEssentials,它呈现的项目比FlatList少得多,然后重新排列它们。应该快得多
f45qwnt84#
另一个优化是使用
keyExtractor
prop提供key
。这很重要t0ybt7op5#
我使用了'react-native-optimized-flatlist',我的问题得到了解决,唯一需要注意的是,当你使用这个包时,它会删除keyExtractor和extraData
ruarlubt6#
你可以使用react-native-optimized-flatlist。它是Flatlist的优化版本。
1)通过以下方式添加此软件包:
npm i -S react-native-optimized-flatlist
或
yarn add react-native-optimized-flatlist
2)将
<FlatList/>
替换为<OptimizedFlatlist/>