在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