react 監聽事件&移除監聽滾動事件失效

react 記錄

componentDidUpdate 在元件完成更新後立即調用。在初始化時不會被調用。監聽事件放在裡面。

componentWillUnmount在元件從 DOM 中移除之前立刻被調用，把移除監聽事件放在這個生命周期函數裡。但是在跳轉其他頁面時，監聽事件并沒有被移除。

// 元件加載時監聽
  componentDidMount() {
    window.addEventListener('scroll',()=>{
      console.log('監聽滾動事件');
    });
  }
  // 元件解除安裝時移除監聽
  componentWillUnmount() {
  	console.log(1);//控制台看是否被觸發
    window.removeEventListener("scroll", ()=>{
      console.log('移除監聽滾動事件');
    });
  }
           

如果加了bind也會導緻移除失敗，bind() 方法會建立一個新函數，也就是說監聽的和移除的不是同一個函數。

// 元件加載時監聽
  componentDidMount() {
    window.addEventListener("scroll", this.onScroll.bind(this));
  }
  // 元件解除安裝時移除監聽
  componentWillUnmount() {
   	console.log(1);//控制台看是否被觸發
    window.removeEventListener("scroll", this.onScroll.bind(this));
  }

  // 監聽調用的方法
  onScroll=()=>{
    console.log('監聽滾動');
  }
           

解決辦法是使用外部函數

componentDidMount() {
    window.addEventListener("scroll", this.onScroll);
  }
  
  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll);
  }

 onScroll=()=>{
    console.log('監聽');
  }