React.Js添加與刪除onScroll事件的方法詳解
React簡(jiǎn)介
React是有Facebook開發(fā)出來用于構(gòu)建前端界面的JS組件庫,由于其背后的強(qiáng)大背景,使得這款庫在技術(shù)開發(fā)上完全沒有問題。
React的優(yōu)勢(shì)
- 解決大規(guī)模項(xiàng)目開發(fā)中數(shù)據(jù)不斷變化變得難以操作的問題;
- 組件化開發(fā),使得開發(fā)更加快速;
- 單向數(shù)據(jù)流,有利于找到問題;
- 虛擬DOM,在React內(nèi)部有一套diff算法可以快速的計(jì)算出整體需要改動(dòng)的位置,從而做到快速局部刷新;舉個(gè)栗子:刪除一個(gè)列表再插入個(gè)新表,計(jì)算后會(huì)比較出不同然后插進(jìn)去;
前言
大家都可能會(huì)遇到這樣的問題,那就是滾動(dòng)事件 。比較獲取div的滾動(dòng)事件,在ReactJS想要給div添加一個(gè)滾動(dòng)事件,那基本上是添加不上的(可能是我的能力有限吧,反正我到目前為止,還沒有找到可以直接給DIV添加滾動(dòng)事件的)。
要想實(shí)現(xiàn)滾動(dòng),那就必須得componentWillMount里注冊(cè)scroll事件, window.addEventListener(‘scroll', this.onScroll.bind(this))
,添加事件非常容易的就添加上了。
在componentWillUnmount 里刪除 window.removeEventListener(‘scroll', this.onScroll.bind(this))
。
添加容易,刪除難,上面那種 remove是刪除不了的。在其它頁面里,如果你滾動(dòng)也會(huì)觸發(fā) onScroll里的事件,此時(shí)就會(huì)報(bào)錯(cuò),說組件已經(jīng)卸載,不能進(jìn)行操作,檢查一下代碼等等吧。
我想肯定有遇到了,也有解決的辦法,果真找到了一篇文章移除 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) } //添加事件監(jiān)聽 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(); } } } //刪除所有事件監(jiān)聽 function removeScrollHandler(){ window.onscroll='' }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
React如何解決fetch跨域請(qǐng)求時(shí)session失效問題
這篇文章主要給大家介紹了關(guān)于React如何解決fetch跨域請(qǐng)求時(shí)session失效問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11詳解在React.js中使用PureComponent的重要性和使用方式
這篇文章主要介紹了詳解在React.js中使用PureComponent的重要性和使用方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07基于React Context實(shí)現(xiàn)一個(gè)簡(jiǎn)單的狀態(tài)管理的示例代碼
本文主要介紹了基于React Context實(shí)現(xiàn)一個(gè)簡(jiǎn)單的狀態(tài)管理的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09使用React-Router時(shí)出現(xiàn)的錯(cuò)誤及解決
這篇文章主要介紹了使用React-Router時(shí)出現(xiàn)的錯(cuò)誤及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03React實(shí)現(xiàn)全局組件的Toast輕提示效果
這篇文章主要介紹了React實(shí)現(xiàn)全局組件的Toast輕提示效果,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09React實(shí)現(xiàn)createElement 和 cloneElement的區(qū)別
本文詳細(xì)介紹了React中React.createElement和React.cloneElement兩種方法的定義、用法、區(qū)別及適用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09