react中window.addEventListener和window.removeEventListener的使用

最新推荐文章于 2024-07-23 09:47:17 发布

cat10month

最新推荐文章于 2024-07-23 09:47:17 发布

阅读量5.7k

点赞数

分类专栏：前端开发工程师文章标签： javascript

本文链接：https://blog.csdn.net/sunzhen15896/article/details/110313031

版权

前端开发工程师专栏收录该内容

42 篇文章 3 订阅

订阅专栏

在React的tsx中，全局事件监听可能导致页面间事件冲突。例如，A页面添加了滚动事件监听，即使在B页面也会触发该事件，引发错误。为避免此问题，应当在组件挂载时添加事件监听，卸载时移除。本文介绍了在`componentDidMount`和`componentWillUnmount`生命周期方法中分别添加和移除滚动事件监听的正确做法，确保事件处理的准确性。

摘要由CSDN通过智能技术生成

写代码过程中，发现在react的tsx中绑定原生事件
window.addEventListener当前页面可以监听到事件，其他页面也可以监听到事件，这就会产生问题，比如A页面监听滚动事件，B页面不需要监听滚动事件，但是B页面也会触发，此时就会产生bug。
正确做法是在A页面绑定事件后，页面卸载的时候清除监听事件。

 constructor(props) {
    super(props);
    this.scrollHandler = this.handleScroll.bind(this);
  }
componentDidMount() {
    window.addEventListener('scroll', this.scrollHandler);
  }
  componentWillUnmount(){
    window.removeEventListener('scroll',this.scrollHandler);
  }
  handleScroll = () =>{
    let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    this._handleScroll(scrollTop);
  }
  _handleScroll = (scrollTop) =>{
	//dosomething
  }