[Swiper]在React中使用Swiper时注意销毁实例

swiper版本号:

json 复制代码
{
  "swiper": "^4.4.2",
}

在useEffect中初始化swiper实例,由于依赖项的变更,可能会重复初始化:

javascript 复制代码
useEffect(() => {
  swiper.current = new Swiper('#mainSwiper', {
    autoplay: {
      delay: 3000,//3秒切换一次
    },
    on: {
      slideChange: function() {
        //...
      },
    },
  });
}, [swiperRef, tabList, swiperList, unmountedRef]);

如果tabList、swiperList有变更,会导致重复创建实例。

我们查看swiper官方文档,找到相关方法:

据此在return中销毁实例:

javascript 复制代码
useEffect(() => {
  swiper.current = new Swiper('#mainSwiper', {
    autoplay: {
      delay: 3000,//3秒切换一次
    },
    on: {
      slideChange: function() {
        //...
      },
    },
  });
  return () => {
    //增加销毁实例的方法,防止多次实例化
    if (swiper.current && isFunction(swiper.current.destroy)){
      try {
        swiper.current.destroy();
        console.log('swiper destroy')
      } catch (e) {
        console.error('swiper destroy error', e)
      }
    }
  }
}, [swiperRef, tabList, swiperList, unmountedRef]);

也许可以使用updateSlides()来更新实例,目前还未使用过该方法。

相关推荐
码喽哈哈哈27 分钟前
day01
前端·javascript·html
XT462538 分钟前
解决 npm install 卡住不动或执行失败
前端·npm·node.js
前端小魔女1 小时前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端
mubeibeinv1 小时前
分页/列表分页
java·前端·javascript
林太白1 小时前
js属性-IntersectionObserver
前端·javascript
爱吃羊的老虎1 小时前
【WEB开发.js】getElementById :通过元素id属性获取HTML元素
前端·javascript·html
lucifer3111 小时前
未集成Jenkins、Kubernetes 等自动化部署工具的解决方案
前端
妙哉7361 小时前
零基础学安全--HTML
前端·安全·html
咔叽布吉2 小时前
【前端学习笔记】AJAX、axios、fetch、跨域
前端·笔记·学习
GISer_Jing2 小时前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js