反应原生100+项目平板表现非常慢

Question

我有一个列表只是简单的文本,反应原生渲染成平面列表但我遇到非常非常慢的性能,使应用程序无法使用.

我怎么解决这个问题？我的代码是:

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

Answer 1

这是我的建议:

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

将renderItem函数移出到render函数的外部,因此每次调用render函数时都不会重新创建它.

B.尝试添加initialNumToRender道具FlatList

它将定义第一次渲染的项目数量,它可以节省一些资源和大量数据.

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

简单地说,它将避免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

优化平面列表的简单方法之一是使用React.memo。用技术术语来说，它基本上对您的数据进行浅层比较，并检查它们是否需要重新渲染。

创建一个文件（例如ListComponent.js）并将 renderItem JSX添加到其中，并将其添加到 renderItem。

// ListComponent.js
import React, { memo } from "react";
import { StyleSheet, Text, View } from "react-native";

const ListComponent = ({ item }) => {
  return  <View ></View>
};

export default memo(ListComponent);

这是您的FlatList

<FlatList
        data={data}
        removeClippedSubviews={true}
        maxToRenderPerBatch={8}
        windowSize={11}
        initialNumToRender={8}
        keyExtractor={keyExtractor}
        renderItem={({ item }) => (
               <ListComponent item={item} />
          )}
      />

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
  />

Answer 4

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

npm install --save recyclerlistview