react native 100+ items flatlist性能非常慢

5n0oy7gb  于 2023-10-22  发布在  React
关注(0)|答案(6)|浏览(174)

我有一个列表,只是简单的文本,渲染成flatlist上的React原生,但我遇到了非常非常慢的性能,使应用程序无法使用。
我该如何解决这个问题?我的代码是:

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

eqfvzcg81#

以下是我的建议:

A.避免renderItem prop 上的匿名箭头函数。

renderItem函数移出到render函数的外部,这样它就不会在每次调用render函数时重新创建自己。

**B.尝试在您的FlatList上添加initialNumToRender prop **

它将定义第一次渲染多少项,它可以保存一些具有大量数据的资源。

C.在Item组件上定义key属性

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

D.可选优化

尝试使用getItemLayout跳过动态内容的测量。另外还有一些名为maxToRenderPerBatchwindowSize的 prop ,您可以使用它们来限制渲染的项目数量。请参阅VirtualizedListFlatList的官方文档。

E. Talk is Cheap,show me the code!

// 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}
  />
);
6ss1mwsb

6ss1mwsb2#

优化平面列表的一个简单方法是使用React.memo。用技术术语来说,它基本上是对数据进行浅层比较,并检查它们是否需要重新渲染。
创建一个文件,如ListComponent.js,并将renderItemJSX添加到其中,然后将其添加到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} />
          )}
      />
uurv41yg

uurv41yg3#

试试这个listview https://github.com/Flipkart/ReactEssentials,它呈现的项目比FlatList少得多,然后重新排列它们。应该快得多

npm install --save recyclerlistview
f45qwnt8

f45qwnt84#

另一个优化是使用keyExtractor prop提供key。这很重要

t0ybt7op

t0ybt7op5#

我使用了'react-native-optimized-flatlist',我的问题得到了解决,唯一需要注意的是,当你使用这个包时,它会删除keyExtractor和extraData

ruarlubt

ruarlubt6#

你可以使用react-native-optimized-flatlist。它是Flatlist的优化版本。
1)通过以下方式添加此软件包:
npm i -S react-native-optimized-flatlist

yarn add react-native-optimized-flatlist
2)将<FlatList/>替换为<OptimizedFlatlist/>

相关问题