// 方式一
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)});