react中怎么移除监听的滚动事件

Question

下面的代码中在componentDidMount监听滚动事件是可以的，可是躺我跳到另一个页面的时候并有走componentWillUnmount中的移除监听事件。有什么方法能解决吗？？
componentDidMount() {

    //监听滚动
    window.addEventListener('scroll', () => {
        console.log('滚动');
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        const header = document.body.querySelector('.headerStyle')
        if (scrollTop > 100) {
            header.style.backgroundColor = '#FF8949'
        } else if (scrollTop < 100 || scrollTop == 0) {
            header.style.backgroundColor = 'rgba(0,0,0,0)'
        }
    })
}
componentWillUnmount() {
    //移除监听
    window.removeEventListener('scroll', () => {
        console.log('移除');
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        const header = document.body.querySelector('.headerStyle')
        if (scrollTop > 100) {
            header.style.backgroundColor = 'rgba(247, 247, 247, 1)'
        } else if (scrollTop < 100 || scrollTop == 0) {
            header.style.backgroundColor = 'rgba(247, 247, 247, 1)'
        }
    })
}

Answer 1

如果要移除事件addEventListener的执行函数必须使用外部函数而不能像你这样直接使用匿名函数

const onScroll = () => {

};

//监听
window.addEventListener('scroll', onScroll);

//移除
window.removeEventListener('scroll', onScroll);

Answer 2

定义一个组件方法, 然后在组件生命周期的钩子上使用。

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