react-id-swiper在app里滑动频繁导致页面崩溃解决办法

场景：

使用了react-id-swiper在h5页面中，在app中开放入口后进行多次频繁滑动会导致页面崩溃

分析：

1.需求是每个tab下都有相应的swiper数据 ，所以每次切换tab都要向后端请求数据，swiper滑动过于频繁，动画还没播放完就已经去请求接口了，这样会导致内存溢出
2.给swiper赋值动态数据时，为获取当前运动的swiper的index值，把swiper赋值给了this.state，这样就会导致在切换的时候一直触发this.setState，然后不停render影响性能

解决办法：

1.在切换swiper动画方法里加一个延迟，使当前动画播放完毕后再去切换slider
2.把swiper实例绑定在this上而不是this.state上，不再频繁触发render

{/* 进度条轮播图 */}
  getSwiper = (node) => {
    // 直接将swiper赋值给this，而不是this.state,因为swiper一直在变化，不用去使用state对比，而且使用state会一直触发setState造成页面的不断渲染
    if (!this.swiper) {
      this.swiper = node.swiper;
      console.log(888888888, this.swiper);
    }
  };
// 直接使用this.swiper进行取值
  handleSlideChange = () => {
    let { tabDetailInfo } = this.props;
    let gradeList = tabDetailInfo.gradeList;
    let index = this.swiper ? this.swiper.activeIndex : tabDetailInfo.showGradeIndex;

    this.setState({
      currentIndex: index
    });
  };

 const params = {
      initialSlide: showGradeIndex, // 初始化时slide的索引
      centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
      slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      renderPrevButton: () => null,
      renderNextButton: () => null,
      on: {
        // 监听 Swiper 的事件，其他 Event 可以参考文档 http://idangero.us/swiper/api/#events
        slideChange: () => {
          // 延迟使当前动画播放完毕再去滑动，避免页面崩溃
          setTimeout(() => {
            this.handleSlideChange();
          }, 100);
        }
      }
    };
    return (
        <Swiper
          {...params}
          ref={(node) => {
            if (node) {
              this.getSwiper(node);
            }
          }}
        >
      )