响应本机100+项平面列表非常慢的性能

Question

我有一个列表，只是简单的文本，渲染成平面列表上的反应本机，但我正经历非常缓慢的性能，这使应用程序无法使用。

我怎么才能解决这个问题？我的代码是：

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

Answer 1

以下是我的建议：

避免在renderItem 道具.上使用匿名箭头函数

将renderItem函数移出呈现函数的外部，这样它就不会在每次调用呈现函数时重新创建自己。

尝试在你的initialNumToRender FlatList上添加道具

它将定义第一次呈现多少项，它可以使用大量数据节省一些资源。

key C.在项目组件上定义支柱

简单地说，它将避免在每个项上定义key的动态添加/删除项上重新呈现。确保它是唯一的，不要使用index作为键！您还可以使用keyExtractor作为替代方案。

D.可选优化

尝试使用getItemLayout跳过动态内容的测量。还有一些名为maxToRenderPerBatch，windowSize的道具，您可以使用它来限制呈现多少项。请参考官方文档VirtualizedList或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}
  />
);

​

Answer 2

尝试这个列表视图https://github.com/Flipkart/ReactEssentials，它呈现的项目比FlatList少得多，然后回收它们。应该快多了。

npm install --save recyclerlistview

Answer 3

检查这个链接

https://github.com/filipemerker/flatlist-performance-tips

示例

FlatList
    containerContentStyle={styles.container}
    data={countries}
    renderItem={({ item }) => (
      <View style={styles.results}>
        <Results 
          {...this.props} 
          country={item} 
          handleUpdate={this.handleUpdate}
          pendingCountry={pendingCountry}
        />
      </View>
    )}
    keyExtractor={item => item.alpha2code}
    ListHeaderComponent={() => this.renderHeader()}

    // Performance settings
    removeClippedSubviews={true} // Unmount components when outside of window 
    initialNumToRender={2} // Reduce initial render amount
    maxToRenderPerBatch={1} // Reduce number in each render batch
    updateCellsBatchingPeriod={100} // Increase time between renders
    windowSize={7} // Reduce the window size
  />