React中使用swiper，当组件卸载后会继续执行Swiper绑定的事件

最新推荐文章于 2022-10-04 16:32:18 发布
最新推荐文章于 2022-10-04 16:32:18 发布
阅读量301 收藏
点赞数
分类专栏： React 文章标签： reactjs javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42397018/article/details/114987500
版权

问题

在React中使用new的方式创建Swiper轮播图，当组件卸载后给Swiper绑定的事件（SlideChange）还是会继续执行一遍，因为在事件中有更改state操作，所以当组件卸载后报错内存泄露。
在这里插入图片描述
当切换路由之后控制台就会报错
在这里插入图片描述

解决办法

想到两种办法解决，目前不知道为啥组件卸载后会执行slideChange事件。可能是我写法有问题？？？
在这里插入图片描述

weixin_42397018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React + swiper
qq_24044863的博客
04-18 1132
React + swiper “react-id-swiper”: “^1.6.8” import Swiper from 'react-id-swiper'; import 'react-id-swiper/src/styles/css/swiper.css'; 问题： 直接使用swiper，属性设置为「loop: true」 + 并且有点击事件时： <Swiper {...swiperParams}> {completion_context.map((item, index) =&
react-swiper:使用ReactJS检测并触发用于滑动的触摸事件，例如onSwipeLeft，onSwipeDown等
04-30
轻扫 使用ReactJS检测并触发用于滑动的触摸事件，例如onSwipeLeft，onSwipeDown等 安装 npm install --save react react-swiper 用法 默认示例 创建一个示例组件： var React = require ( 'react' ) ; var Swiper = require ( 'react-swiper' ) ; React . initializeTouchEvents ( true ) ; var Example = React . createClass ( { render : function ( ) { return ( < Swiper xss=removed xss=removed>
[react] 组件卸载前，加在DOM元素的监听事件和定时器要不要手动清除？为什么？
歌谣的博客
11-20 1286
[react] 组件卸载前，加在DOM元素的监听事件和定时器要不要手动清除？为什么？ 定时器要在 componentWillUnmount 手动清除，直接绑定在JSX里的事件监听器不用，使用ref绑定的要清除 因为如果不清除定时器，组件卸载后依然执行，this指向，event等都会因为找不到而报错。 原生事件也要清除，声明变量时保存了某个DOM的引用，内存中依然会保留，事件也就不会被清除，导致不会进入垃圾回收机制。可能会造成内存溢出。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，..
vue项目安装 / 卸载 依赖包
文龙刚的博客
06-22 2538
vue项目安装 / 卸载 依赖包
vue安装和卸载依赖包
最新发布
Zeng的博客
10-04 5765
依赖安装在package.json的【devDependencies】的两种方式。依赖安装在package.json的【dependencies】的三种方式。
react中使用swiper的具体方法
08-27
在引入Swiper文件后，需要在React组件中声明一个变量，并在组件的生命周期中使用Swiper。例如： ```javascript import React, { Component } from 'react' let Swiper = window.Swiper class About extends ...
react-手把手教你在react中使用Swiper4做轮播图
08-15
手把手教你在 react 中使用 Swiper 4 做轮播图
react-native封装插件swiper的使用方法
08-27
React Native 中的 Swiper 插件使用方法 React Native 是一个基于 React 的框架，用于构建跨平台的移动应用程序。Swiper 是一个流行的插件，提供了一个滑块式的滑动组件，可以用来实现图片轮播、产品展示、信息流等...
react-native-swiper-hooks：for用于React Native的强大的Swiper hooks组件
02-05
:unicorn_face: 这是React Native强大的Swiper hooks组件 :sparkles:为React Native开发的滑动挂钩组件 :books: 欢迎通过“问题”或我的联系信息提供您的宝贵意见或建议 :sparkles:欢迎通过“ issues”或我的联系...
react-native-swiper：React Native最好的Swiper组件
02-05
适用于React Native的最佳Swiper组件。React本机刷卡路线图请参阅： 变更日志[1.6.0-rc] 相依性删除ViewPagerAndroid，使用ScrollView＃1009 测试整合设置端到端测试打字稿更正错误的类型＃1000 通过TypeScript定义...
使用swiper动态加载数据遇到的坑
菜菜的博客
05-01 1万+
使用swiper做轮播官网上的用法都很简单，因为案例的数据是写死在html里的，这样的情况下swiper放在页面的任意位置初始化都可以，但是实际开发中，很多时候轮播的数据我们是动态获取的，所以swiper结合动态加载数据的轮播就发现有坑了。 在页面开始先初始化的swiper，再发送请求动态加载数据然后生成html插入到swiper的容器里，然后发现多个sw...
javascript内存泄漏总结
每天都记录一点点！
09-28 3159
作为一个前端，其实很少会注意到有内存泄漏的情况，大多数前端er都会认为JS是不会存在内存泄漏的，然后事物都没有绝对的，按照JS的设计初衷javascript这门语言是不应该有内存泄漏这个问题的，但是JS并不是独立的，JS本身就是用来与DOM交互的，这两者之间摩擦摩擦，就会产生一些问题，下面来说说这些问题怎么产生的以及解决办法： 1、给DOM对象添加的属性是一个对象的引用。范例：  var My
内存泄漏的原因和识别方法
weixin_43837268的博客
06-10 461
一、内存泄漏的原因 虽然JavaScript会自动垃圾收集，但是如果我们的代码写法不当，会让变量一直处于“进入环境”的状态，无法被回收。下面列一下内存泄漏常见的几种情况： 1.意外的全局变量 function foo(arg) { bar = "this is a hidden global variable"; } bar没被声明,会变成一个全局变量,在页面关闭之前不会被释放...
内存泄漏怎么处理
kassiaaaa的博客
06-09 2688
什么是内存泄漏？ 程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。 对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能:变慢，延迟大等 ，重则导致进程崩溃。 不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。 内存泄漏的识别方法 1. 使用快捷键 F12 或者 Ctrl+Shift+J 打开 Chrome 浏览器的「开发者工具」。 2. 选择 Performance(老版为T
npm 如何卸载swiper_解决vue中使用swiper插件问题及swiper在vue中的用法
weixin_39687814的博客
02-08 3441
Swiper简介Swiper常用于移动端网站的内容触摸滑动。Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行问题这次我们模拟从后台取下数...
Hexo+Kaze+Gitee Pages 搭建静态博客网站
程序员蜗牛
12-13 708
<h2 id="前言">前言</h2> <p>建网站本身是一个很大的工程，涉及前端页面的搭建，网站数据的存储，还要购置服务器资源，甚至是后期的维护，过程相当繁琐。</p> <p>不过如果仅仅是想搭建个
react中使用swiper
tuzi007a的博客
03-08 1万+
react中使用swiper简单介绍swiper@5.4.5的基本使用安装和卸载在组件中引入完整示例react中使用swiper@6.8.4安装和卸载引入核心组件和样式让轮播图跑起来配置项说明完整配置项示例：封装一个简易的轮播器 简单介绍 作为轮播图的首选插件，swiper无疑是这方面专注性最强的。 但是，在使用时，每次都会遇到一个很*疼的问题： 就是把官网里的示例拿过来，并不能跑的通，而且不同版本之间， 使用起来 差别还挺大。 作为和框架契合前的最稳定版本swiper@5.4.5， 它使用简单，配置方便
npm run dev 后dist 被情况_什么是npm系列：一、npm简介
weixin_39933026的博客
11-21 152
npm是Node.js的包管理工具，它的诞生也极大的促进了前端的发展，在现代前端开发中都离不开npm的身影。本文是npm系列的第一篇，知识很基础，作为一个热身文章，如果各位已经是开发熟练工了，完全可以跳过这篇。1. 安装 npmnpm 是基于 Node.js，所以我们需要安装 Node.js，方式有两种：Node.js 网站nvm (建议) 具体文章可以搜索下2. 使用2.1 如何更新npm// ...
vue 安装依赖及卸载依赖
热门推荐
丽丽大神ing的博客
03-20 4万+
参考链接：https://docs.npmjs.com/uninstalling-packages-and-dependencies --save 是在package.json的【dependencies】里面 --save-dev是在package.json的【devDependencies】里面 依赖安装在package.json的【dependencies】的三种方式 np...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值