react 函数的监听与移除 及函数中this的指向问题

// 方式一
    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize)
    }


    handleResize = () => {
        console.log('事件', this);
    }

// 方式二
    constructor(props) {
        super(props);

        // 首先要以为次方式指向this,否则handleResize里面无法使用this
        this.handleResize = this.handleResize.bind(this);
    }

    componentDidMount() {
        window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize)
    }

    handleResize() {
        console.log('事件', this);
    }

上面两种方式主要在于函数的定义方式不同
 

// 下列错误示范都会导致removeEventListener失效

window.addEventListener('resize', this.handleResize.bind(this));
window.removeEventListener('resize', this.handleResize.bind(this));


window.addEventListener('resize', this.handleResize());
window.removeEventListener('resize', this.handleResize());


window.addEventListener('resize', () => {console.log(事件, this)});
window.removeEventListener('resize', () => {console.log(事件, this)});