React Native 没有修复我的 FlatList - VirtualizedList：你有一个更新缓慢的大列表

问题描述

由于渲染太多，我一直在尝试修复我的虚拟化列表问题... 这发生在我来回切换时，从这里的一个项目：餐厅（餐厅屏幕）到带有标签栏的 flatList，我也一直在尝试渲染更少的项目，但即使限制下降，它似乎也没有上班...

我用什么

我正在使用 animated bottom sheet 在 mapView 顶部显示 flatList

我尝试了什么

我一直在寻找并尝试that

还有that

还有那些issues

我尝试使用 Hook useMemo 但显然它确实适用于复杂的东西，例如数组，或者我的依赖项配置是错误的：

const renderMemo = useMemo(() => renderItem,[]) //what should be in the array? data? !isLoading ? limit ? ( the limit is change when onEndReached)

（代码如下）

我试图制作我的列表的纯组件（renderItem）

问题

我仍然得到： VirtualizedList：您有一个更新缓慢的大列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，例如 PureComponent、shouldComponentUpdate 等。 Object { “内容长度”：5148.66650390625， “DT”：4164， "prevDt": 2313,} 在这个特殊的设置中，我有一段时间没有做任何事情，我得到了那个错误：

 _Warning: Can't perform a React state update on an unmounted component. This is a no-op,but it indicates a memory leak in your application. To fix,cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at [native code]:null in dispatchAction
at containers/HomeScreen.js:87:16 in fetchData
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue_

我没有尝试过 shouldComponentUpdate 因为我不太了解它......我的意思是我不知道在哪里找到它......

我现在应该去哪里？也许是备忘录？

有没有办法减少 useEffect 的渲染量

代码

repo native

主屏幕：

  const renderContent = () =>
    !isLoading ? (
      <View style={styles.firstParentVieWrenderContent}>
       ....
          <FlatListContents
            data={data}
            navigation={navigation}
            setLimit={setLimit}
            limit={limit}
            skip={skip}
            setSkip={setSkip}
            handleColors={handleColors}
          />
      </View> 
      

flatListContents 组件：

const handleLoadMore = () => {
   console.trace("handleMore");
   // console.log(limit);
   setIsLoadingMore(true);
   // if (limit > 30) setIsLoadingMore(false);
   if (!isLoading) {
     setLimit(limit + 10);
     setIsLoadingMore(false);
   }
 };

 // const renderMemo = useMemo(() => renderItem,[]);

 const renderItem = ({ item }) => {
   return (
     <PureCompFlatlist
       item={item}
       handleColors={handleColors}
       navigation={navigation}
     />
   );
 };
 
  return (
    <FlatList
         data={data}
         keyExtractor={(item) => String(item.placeId)}
         renderItem={renderItem}
         removeClippedSubviews={true}
         maxToRenderPerBatch={20}
         initialNumToRender={5}
         windowSize={limit}
         getItemLayout={(data,index) => {
           return {
             length: styles.flatList.height,offset: 25 * styles.flatList.height,index,};
         }}
         onEndReached={handleLoadMore}
         onEndReachedThreshold={0.5}
         // ListFooterComponent={renderFooter}
       />

PureCompFlat：

export class PureCompFlatlist extends PureComponent {
  render() {
    const { item,handleColors,navigation } = this.props;
    return (
      <TouchableOpacity
        style={styles.flatList}
        onPress={() =>
          navigation.navigate("Restaurant",{
            id: item.placeId,name: item.name,description: item.description,rating: item.rating,thumbnail: item.thumbnail,color: handleColors(item.type),})
        }
      >
        <Image style={styles.flatListPic} source={{ uri: item.thumbnail }} />
        <View style={styles.flatListContent}>
          <View style={styles.flatListNameType}>
            <Text style={styles.flatListText}>{item.name}</Text>
            <Text style={styles.flatListText}>{item.type}</Text>
          </View>
          <Text style={styles.flatListText}>{item.rating}</Text>
          <Text style={styles.flatListText} numberOfLines={2}>
            {item.description}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

提前致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）