在React中引用了swiper.js，如何解决swiper渲染慢，且页面切换后swiper变卡顿的

Question

目前我在用React写移动端页面，有一个页面引用了Swiper@4.2.2版本。页面之间进行路由切换时，Swiper就渲染得特别慢。而且，页面切换几次之后，swiper就变得卡顿。

我是这样使用swiper的：

new Swiper(".swiper-container", {

  pagination: {

    el: ".swiper-pagination"

  },

  initialSlide: swiperIndex,//设定初始化时slide的索引

  watchOverflow: true,

  observer: true, //修改swiper自己或子元素时，自动初始化swiper

  observeParents: true, //修改swiper的父元素时，自动初始化swiper

  on: {

    slideChangeTransitionStart: function(event) {

      matchIndex=this.activeIndex;

      

    }

  }

});

Answer 1

组件生命周期结束函数里销毁创建的Swiper实例创建Swpier时用ref属性来指定Swiper容器，不用className