[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()来更新实例,目前还未使用过该方法。

相关推荐
我要洋人死10 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人22 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人22 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR28 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香30 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969333 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai38 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress