React native Flatlist 渲染大数据非常慢答案

【问题标题】：React native Flatlist renders large data very slowReact native Flatlist 渲染大数据非常慢
【发布时间】：2021-07-03 11:08:40
【问题描述】：

我正在使用 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
     data={questionArray}
     showsVerticalScrollIndicator={false}
     renderItem={renderItem}
     keyExtractor={keyExtractor}
/>

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

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

【问题讨论】：

请你分享你的flatlist组件？？？
@HamzaHmem 我已经添加了我的平面列表组件。

标签： react-native react-native-flatlist flatlist

【解决方案1】：

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

尝试将基于类的组件制作成React.PureComponent
您也可以尝试将removeClippedSubviews 设置为true。
```
 <FlatList removeClippedSubviews ..someOtherProps/>
```
在您的FlatList 中添加keyExtractor，如下所示：
```
 <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

【讨论】：

我的数据集很大，不支持分页。所以你上面的解决方案都不适合我。
还有其他解决方案吗？
@venomous31 你能在snack.expo.io 上分享一个小的工作代码吗？将查看哪种解决方案最适合您的用例。

【解决方案2】：

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

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

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

【讨论】：

它不工作，我得到空白屏幕。数据未在屏幕中呈现。