How does swiper.js, solve the problem that swiper rendering is slow and swiper becomes stuttered after page switching in React?

I am currently using React to write a mobile page, and one page references the Swiper@4.2.2 version. When you switch routes between pages, Swiper renders very slowly. Moreover, after a few page changes, swiper becomes stuttered.

this is how I use swiper:

new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination"
  },
  initialSlide: swiperIndex,//slide
  watchOverflow: true,
  observer: true, //swiperswiper
  observeParents: true, //swiperswiper
  on: {
    slideChangeTransitionStart: function(event) {
      matchIndex=this.activeIndex;
      
    }
  }
});
Mar.12,2021

destroy the created Swiper instance in the end-of-life function of the component
use the ref attribute to specify the Swiper container when creating Swpier, instead of className

Menu