関数はアンマウントされていますが、まだイベントリスナーで実行中

Question

ウィンドウイベントリスナーにバインドされている関数がアンマウントされました。それでも、次のページに行くと、イベント内の関数はまだ削除されていますが実行されますか？ここで何が問題だろうか？ここで

componentDidMount(){ 
    window.addEventListener("resize", this.updateDimensions.bind(this)); 
    } 
    componentWillUnmount(){ 
    console.log("unmounting...."); 
    window.removeEventListener('resize', this.updateDimensions.bind(this)); 
    } 

がイベントにバインドさ-装着されている機能です。

updateDimensions(){ 
     if (this.refs.get_it.clientWidth < 774){ 
     this.setState({ 
     width:this.refs.get_it.clientWidth, 
     height:400, 
     flag:true}); 
     } 
    } 

Answer 1

若干の混乱があなたのコードであり

componentDidMount(){ 
     window.addEventListener("resize", this.updateDimensions.bind(this)); 
     // first instance listening to event 
    } 
    componentWillUnmount(){ 
     console.log("unmounting...."); 
     window.removeEventListener('resize', this.updateDimensions.bind(this)); 
     // second instance removed from listener here first!== second 
    } 

ちょうどこの

constructor(props) { 
     super(props); 
     this.updateDimensions = this.updateDimensions.bind(this); 
    } 
    componentDidMount(){ 
     window.addEventListener("resize", this.updateDimensions); 
     // first instance listening to event 
    } 
    componentWillUnmount(){ 
     console.log("unmounting...."); 
     window.removeEventListener('resize', this.updateDimensions); 
     // same instance removed from listener here first == second 
    }