react-native-snap-carousel 对于大数据来说非常滞后答案

【问题标题】：react-native-snap-carousel is very laggy for large datareact-native-snap-carousel 对于大数据来说非常滞后
【发布时间】：2022-12-24 12:01:49
【问题描述】：

我正在使用react-native-snap-carousel 浏览图像。当有 0-10 张图像时，它工作正常，但否则它会非常滞后。我尝试了优化方法，但没有修复它。

这是我的实现（selectedItems是我的数据）：

const renderItem = useCallback(
  ({ item, index }) => {
  return (
    <CarouselImage
      ad={ad}
      item={item}
      index={index}
      showImage={showImage}
    />
  );
},
[ad, showImage]);



return ad?.videos?.length > 0 || ad?.images?.length > 0 ? (
    <View style={styles.container}>
      <Carousel
        initialNumToRender={selectedItems.length}
        maxToRenderPerBatch={5}
        ref={carouselRef}
        swipeThreshold={5}
        itemWidth={wp(375)}
        data={selectedItems}
        sliderWidth={wp(375)}
        enableMomentum={false}
        lockScrollWhileSnapping
        renderItem={renderItem}
        onSnapToItem={(index) => setActiveSlide(index)}
      />
      <Pagination
        activeOpacity={1}
        tappableDots={true}
        animatedDuration={100}
        inactiveDotScale={0.4}
        inactiveDotOpacity={0.4}
        carouselRef={carouselRef}
        dotStyle={styles.dotStyle}
        activeDotIndex={activeSlide}
        dotsLength={selectedItems.length}
        containerStyle={styles.pagination}
        dotContainerStyle={styles.dotContainer}
        inactiveDotStyle={styles.inactiveDotStyle}
      />
    </View>

有什么我想念的吗？另外，是否有一个替代库可以更好地处理大数据？

【问题讨论】：

标签： react-native

【解决方案1】：

试试这个替代库：react-native-banner-carousel-updated

我将它与 20 多张图片一起使用，效果很好。

【讨论】：

我认为这与我每次滚动重新渲染组件时更新的状态有关。你知道如何解决这个问题吗？

【解决方案2】：

我假设您尝试过的优化是 react-native-snap-carousel 库文档中描述的...

我也发现每次滑动都会导致我的屏幕组件重新呈现。你可能在想...

我认为这与我每次滚动重新渲染组件时更新的状态有关。你知道如何解决这个问题吗？

为防止重新呈现您的<Carousel ... /> 组件，您要查看的优化是利用React.memo()

尝试将您的 <Carousel ... /> 组件重构为一个新的组件文件，就像这样......

图库.js
import React from "react";
import CarouselCardItem, { SLIDER_WIDTH } from "./CarouselCardItem";
import { ALL_RECIPES } from "../config/Recipe/allRecipes";
import Carousel from "react-native-snap-carousel";

const Gallery = ({ carouselRef, selectedItems}) => {
  console.log("render"); // <== This will render only when props change (ie. the ref - which should not change, or you pass fresh data - in which case you want it to re-render)
  return (
      <Carousel
          initialNumToRender={selectedItems.length}
          maxToRenderPerBatch={5}
          ref={carouselRef}
          swipeThreshold={5}
          itemWidth={wp(375)}
          data={selectedItems} // <== selectedItems could be passed in as prop, or from app state
          sliderWidth={wp(375)}
          enableMomentum={false}
          lockScrollWhileSnapping
          renderItem={renderItem}
          onSnapToItem={(index) => setActiveSlide(index)}
      />
  );
};
const GalleryMemo = React.memo(Gallery);
export default GalleryMemo;
然后在你的屏幕文件中，使用它<GalleryMemo carouselRef={carouselRef} selectedItems={selectedItems} />

【讨论】：