React 使用addEventListener监听浏览器窗口大小、浏览器滚动条滚动

前言：在做顶部菜单导航栏的时候需要实时的监听，浏览器的窗口变动，来获取浏览器宽度

 componentDidMount() {
    // 监听滚动
    window.addEventListener('scroll', this.handleScroll)
    // 监听窗口大小改变
    window.addEventListener('resize', this.handleResize)
  }
  
  componentWillUnmount() { 
    // 一定要最后移除监听器，以防多个组件之间导致this的指向紊乱
    window.removeEventListener('scroll', this.handleScroll) 
    window.removeEventListener('resize', this.handleResize)
  }
  
  handleScroll = e => {
    console.log(
      '浏览器滚动事件',
      e.srcElement.scrollingElement.scrollTop, // 距离滚动条顶部高度
      e.srcElement.scrollingElement.scrollHeight, // 整个文档高度
    )
  }
  
  handleResize = e => {
    console.log('浏览器窗口大小改变事件', e.target.innerWidth)
  }