react中 怎么在componentWillUnmount中使用removeEventListener

红星照我去战斗
  • 123

我在componentDidMount中,给window添加了一个scroll事件:srocll1
我现在想在componentWillUnmount中删除这个事件,这该怎么写呢?

简要代码:

export default class A extends React.Component {

    constructor(props) {
        super(props);
    }
    scroll1(){}

    componentDidMount() {
        window.addEventListener('scroll', this.srcoll1.bind(this));
    }
    
    componentWillUnmount(){
        window.removeEventListener('scroll', this.srcoll1);

    }

    render() {
    };

}

这个写法可以成功给给window加上事件,然后Ummount时,这个事件删不掉。求大神告知正确的写法,感激不尽!!!

回复
阅读 7.6k
1 个回答
brook
  • 3.1k
export default class A extends React.Component {

    constructor(props) {
        super(props);
        this.scroll1 = this.scroll1.bind(this)
    }
    scroll1(){}

    componentDidMount() {
        window.addEventListener('scroll', this.scroll1);
    }
    
    componentWillUnmount(){
        window.removeEventListener('scroll', this.scroll1);

    }

    render() {
    };

}

因为你绑定的是this.scroll1.bind(this),而不是this.scroll1,所以需要将this.scroll1.bind(this)指到同一个变量
另外airbnb的react guide也是建议用这种写法
https://github.com/JasonBoy/javascript/tree/master/react#methods-%E5%87%BD%E6%95%B0

当在 render() 里使用事件处理方法时,提前在构造函数里把 this 绑定上去.
为什么? 在每次 render 过程中, 再调用 bind 都会新建一个新的函数,浪费资源.

宣传栏