react-native - React Native Flatlist 渲染大数据非常慢

Question

我正在使用 flatlist 在 react native 中呈现我的数据，但是 flatlist 呈现大量数据的速度非常慢，并且在快速滚动后它会重新呈现数据。因此，我的应用程序需要大量时间才能显示完整数据。我也收到了类似的消息VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate我已经尝试了所有 flatlist 优化技术，但 flatlist 渲染速度很慢。任何建议，如何解决这个问题？
我的 flatlist 组件看起来像

<FlatList
     data={questionArray}
     showsVerticalScrollIndicator={false}
     renderItem={renderItem}
     keyExtractor={keyExtractor}
/>

const renderItem = useCallback(
        ({ item, index }) => {
                              ....
                             },
        []
    );

const keyExtractor = useCallback((item, index) => index.toString(), []);

Answer 1

您可以尝试一些步骤，因为它完全取决于数据集以及您在项目中实现/使用的方式。

尝试将 Class-based Component 设为 React.PureComponent

您也可以尝试设置 removeClippedSubviews至 true .

 <FlatList removeClippedSubviews ..someOtherProps/>

添加 keyExtractor在您的 FlatList像这样:

 <FlatList keyExtractor={keyExtractor} ... />

添加 onEndReached功能。

const [loader, setLoader] = useState(false);

const onEndReached = (page) => {
  if (next && !loader) {
    setPage(page + 1)
  }
}

const loadData = async () => {
  setLoader(true);
  const resp = await getData();
  setLoader(false);
}



<FlatList ...someprops onEndReached={onEndReached} />

套装initialNumToRender={integer-value}

发现这个:Flatlist Performance