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

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

尝试将基于类的组件变成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

Answer 2

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

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

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

React Native Flatlist 渲染大数据非常慢

2 个答案: