如何防止多次重新呈现？

Question

你好，我在应用程序负载方面遇到了问题。

原来，我的renderitem组件重新启动了10-12次。每次我和他一起工作时都会发生。

事实是，这是应用程序中的主要元素。它在转盘中。

轮播模块取自以下网址：https://github.com/archriss/react-native-snap-carousel

我试图以PureComponent的方式解决此问题。但这对我没有任何帮助。

我将在下面提供两个主要元素。

轮播：

<Carousel
            scrollInterpolator={scrollInterpolators[`scrollInterpolator${4}`]}
            slideInterpolatedStyle={animatedStyles[`animatedStyles${4}`]}
            enableMomentum={true}
            enableSnap={true}
            inactiveSlideShift={4}
            lockScrollWhileSnapping={true}
            scrollEndDragDebounceValue={2}
            windowSize={1}
            useScrollView={true}
            firstItem={this.state.activeSlide}
            sliderWidth={screenWidth}
            shouldOptimizeUpdates={true}
            itemWidth={screenWidth}
            data={this.state.dataObject}
            renderItem={this._rendersItem}
            onSnapToItem={index => this.setState({ activeSlide: index })}
          />

里面是renderItem：

_rendersItem = ({ item }) => {
    let imageHomeObject = require("../../../assets/home_icon.png");
    let imageCarObject = require("../../../assets/car_icon.png");
    let imageWorkObject = require("../../../assets/work_icon.png");
    let imageTruckObject = require("../../../assets/truck_icon.png");
    let imageFlatObject = require("../../../assets/flat_icon.png");
    let MiniimageHomeObject = require("../../../assets/mini_home_icon.png");
    let MiniimageCarObject = require("../../../assets/mini_car_icon.png");
    let MiniimageWorkObject = require("../../../assets/mini_work_icon.png");
    let MiniimageTruckObject = require("../../../assets/mini_truck_icon.png");
    let MiniimageFlatObject = require("../../../assets/mini_flat_icon.png");




    _showModal = this._showModal;
    _dataObject = this.state.dataObject;
    _ActiveSlide = this.state.activeSlide;
    _CurrentSet = this._SendingName;
    _CheckIconSetting = this._StartChecking;

    if (this.state.DataGet === true) {

      return (
        <View
          style={{
            paddingBottom: 14,
            paddingTop: 8,
            flex: 1,
            paddingHorizontal: 8,
            width: w
          }}
        >
          <ItemPureCard
            data={item}
            Redner= { console.log("RENDER ITEM") }

            //=========================== STATUS OBJECT
            StatusObj={
              item.status === "C" ? (
                <Ionicons name="ios-lock" size={28} color={ColorApp} />
              ) : item.status === "O" ? (
                <Ionicons name="ios-unlock" size={28} color="red" />
              ) : item.status === "N" ? (
                <Ionicons
                  name="ios-help-circle-outline"
                  size={28}
                  color={ColorApp}
                />
              ) : null
            }
            //=========================== SHOW MESSAGEBOX
            onLock={() =>
              _showModal(
                this.setState({
                  idSideObj: item.idSite,
                  visibleModal: false
                })
              )
            }
            //=========================== OPEN EDIT PAGE

            onClick={() =>
              this.props.navigation.navigate(EDITPAGE, {
                ObjectName: item.aliasName === "" ? item.name : item.aliasName,
                ImageName: item.user,
                CurrentAddress: item.address,
                CurrentSiteObj: item.idSite,
                CurrentImageSite: this.state[item.address],
                ObjectImage:
                  item.type === 2
                    ? MiniimageHomeObject
                    : item.type === 3
                    ? MiniimageWorkObject
                    : item.type === 4
                    ? MiniimageCarObject
                    : item.type === 1
                    ? MiniimageFlatObject
                    : item.type === 5
                    ? MiniimageTruckObject
                    : null,

                onGoBack: this.onGoBack
              })
            }

            //=========================== ICON OR IMAGE FOR OBJECT

            ImageItemReq={
              item.type === 2
                ? imageHomeObject
                : item.type === 3
                ? imageWorkObject
                : item.type === 4
                ? imageCarObject
                : item.type === 1
                ? imageFlatObject
                : item.type === 5
                ? imageTruckObject
                : null
            }

             ImageItem={
              this.state[item.address] !== undefined
                ? this.state[item.address]
                : null
            }

            //============================ OBJECT NAME

           nameItem={item.aliasName === "" ? item.name : item.aliasName}

           //============================= OPEN CAMERA PAGE

           GoCamera={() => this.props.navigation.navigate(CAMERAVIEW)}


           //============================= SET CURRENT NAME IN ASYNC STORAGE

           CurrentName={ _CurrentSet(
              (itemCard = _dataObject[_ActiveSlide].name),
              (aliasName = _dataObject[_ActiveSlide].aliasName)
            )}


           //============================ CURRENT WIDTH

           WidthProps={w}


            //============================ CHECK ICON SETTINGS 


            imageRender={_CheckIconSetting(
              (CurrentSiteID = _dataObject[_ActiveSlide].address),
              (itemCard = _dataObject[_ActiveSlide].name),
              (aliasName = _dataObject[_ActiveSlide].aliasName)
            )}



            CurrentItem={item.type}
          />
        </View>
      );
    } else {
      return null;
    }
  };

我将很高兴为您提供帮助！