React.Js添加与删除onScroll事件的方法详解


Posted in Javascript onNovember 03, 2017

React简介

React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题。

React的优势

  • 解决大规模项目开发中数据不断变化变得难以操作的问题;
  • 组件化开发,使得开发更加快速;
  • 单向数据流,有利于找到问题;
  • 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新;举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去;

前言

大家都可能会遇到这样的问题,那就是滚动事件 。比较获取div的滚动事件,在ReactJS想要给div添加一个滚动事件,那基本上是添加不上的(可能是我的能力有限吧,反正我到目前为止,还没有找到可以直接给DIV添加滚动事件的)。

要想实现滚动,那就必须得componentWillMount里注册scroll事件, window.addEventListener(‘scroll', this.onScroll.bind(this)) ,添加事件非常容易的就添加上了。

在componentWillUnmount 里删除 window.removeEventListener(‘scroll', this.onScroll.bind(this)) 

添加容易,删除难,上面那种 remove是删除不了的。在其它页面里,如果你滚动也会触发 onScroll里的事件,此时就会报错,说组件已经卸载,不能进行操作,检查一下代码等等吧。

我想肯定有遇到了,也有解决的办法,果真找到了一篇文章移除 scroll 办法的。

代码如下:

componentDidMount() {
 regScroll(this.handler.bind(this));
 //window.addEventListener('scroll', this.handler.bind(this),false)
}

componentWillUnmount() {
 window.onscroll = '';
 //window.removeEventListener('scroll', this.handler.bind(this),false)
}
 //添加事件监听
function regScroll(myHandler) {
 if (window.onscroll === null) {
 window.onscroll = myHandler
 } else if (typeof window.onscroll === 'function') {
 var oldHandler = window.onscroll;
 window.onscroll = function () {
 myHandler();
 oldHandler();
 }
 }
}
//删除所有事件监听
function removeScrollHandler(){
 window.onscroll=''
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
尽可能写"友好"的"Javascript"代码
Jan 09 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
原生JavaScript实现留言板
Jan 10 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
nginx配置React静态页面的方法教程
Nov 03 #Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 #Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 #Javascript
基于ES6作用域和解构赋值详解
Nov 03 #Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 #Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 #Javascript
You might like
smarty section简介与用法分析
2008/10/03 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
解析yii数据库的增删查改
2013/06/20 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python list排序的两种方法及实例讲解
2017/03/20 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
TensorFlow变量管理详解
2018/03/10 Python
详解python中的json和字典dict
2018/06/22 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python通过Pillow实现图片对比
2020/04/29 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
美国牛仔品牌:True Religion
2018/11/16 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
学校消防演习方案
2014/02/19 职场文书
组织生活会发言材料
2014/12/15 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers