React原生平面列表渲染大型数据的速度非常慢

Question

我使用flatlist在原生react中渲染我的数据，但是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
     data={questionArray}
     showsVerticalScrollIndicator={false}
     renderItem={renderItem}
     keyExtractor={keyExtractor}
/>

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

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

Answer 1

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

向React.PureComponent提供基于类的组件的

1. 尝试

1. 您也可以尝试将removeClippedSubviews设置为true。

1. 在您的FlatList中添加keyExtractor，如下所示：

1. Add onEndReached Function。

常量加载器，setLoader =useState(假)；

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

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



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

1. set initialNumToRender={integer-value}

1. 找到了这个:Flatlist Performance

Answer 2

也许可以通过"useMemo()“来实现

   const memoizedValue = useMemo(() => renderItem, [array]);

        <FlatList
            keyExtractor={keyExtractor}
            data={array}
            renderItem={memoizedValue}
        />
      const renderItem = ({ item }) => (
         <ListItem/>
      )