反应本地100多个项目的平板列表性能非常慢 [英] react native 100+ items flatlist very slow performance

问题描述

我只有一个简单的文本列表，在响应本机时会呈现为平面列表，但是我遇到了非常慢的性能，这使应用程序无法使用.

I have a list just simple text that rendering into flatlist on react native but I am experiencing very very slow performance which makes app unusable.

我该如何解决?我的代码是:

How can I solve this? My code is:

<FlatList
  data={[{key: 'a'}, {key: 'b'} ... +400]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

推荐答案

这是我的建议:

A.避免在renderItem道具上使用匿名箭头功能.

A. Avoid anonymous arrow function on renderItem props.

将renderItem函数移到render函数的外部，这样就不会在每次调用render函数时重新创建自身.

Move out the renderItem function to the outside of render function, so it won't recreate itself each time render function called.

B.尝试在FlatList

B. Try add initialNumToRender prop on your FlatList

它将定义第一次渲染多少个项目，它可以节省大量数据的资源.

It will define how many items will be rendered for the first time, it could save some resources with lot of data.

C.在项目组件上定义key道具

C. Define the key prop on your Item Component

简而言之，它将避免在每个项目上定义了key的动态添加/删除项目上重新渲染.确保它是唯一的，不要使用index作为键！您也可以使用keyExtractor作为替代.

Simply it will avoid re-render on dynamically added/removed items with defined key on each item. Make sure it is unique, don't use index as the key! You can also using keyExtractor as an alternative.

D.可选优化

尝试使用getItemLayout跳过动态内容的度量.还有一些叫做maxToRenderPerBatch，windowSize的道具，可以用来限制要渲染的项目数量.请参考官方文档以 VirtualizedList 或

Try use getItemLayout to skip measurement of dynamic content. Also there is some prop called maxToRenderPerBatch, windowSize that you can use to limit how many items you will rendered. Refer to the official doc to VirtualizedList or FlatList.

E.谈话很便宜，请告诉我代码！

// render item function, outside from class's `render()`
const renderItem = ({ item }) => (<Text key={item.key}>{item.key}</Text>);

// we set the height of item is fixed
const getItemLayout = (data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
);

const items = [{ key: 'a' }, { key: 'b'}, ...+400];

function render () => (
  <FlatList
    data={items}
    renderItem={renderItem}
    getItemLayout={getItemLayout}
    initialNumToRender={5}
    maxToRenderPerBatch={10}
    windowSize={10}
  />
);

这篇关于反应本地100多个项目的平板列表性能非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！