反应。实现setState方法的去抖动功能

Question

我正在开发一个简单的组件，它将视口尺寸传递给子组件。在调整窗口大小时，我启动了handleResize方法将新的窗口尺寸传递给子组件。我想使用lodash中的debounce func来最小化调用handleResize方法的次数（ref）。

import React from 'react' 

import debounce from 'lodash/debounce' 

const getDimensions = (Component) => { 
    return class GetDimensions extends React.Component { 
    constructor() { 
     super() 

     this.state = { 
     viewport: { 
      x: window.innerWidth, 
      y: window.innerHeight 
     } 
     } 
    } 

    handleResize =() => { 
     this.setState(() => ({viewport: {x: window.innerWidth, y: window.innerHeight}})) 
    } 

    componentDidMount =() => { 
     if (window) window.addEventListener('resize', debounce(this.handleResize, 400)) 
    } 

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

    render() { 
     return (
     <Component 
      {...this.props} 
      viewport={this.state.viewport} 
     /> 
    ) 
    } 
    } 
} 

export default getDimensions 

它可以作为预期，但我不断收到警告：

有谁知道这是怎么回事？

请让我知道

Answer 1

请记住，您并未删除该事件。 if (window) window.addEventListener('resize', debounce(this.handleResize, 400))将改变函数并返回一个包装函数，事件的删除只是传递原始this.handleResize，这将不会被发现。

您需要在构造函数中使用this.handleResize = debounce(this.handleResize, 400)。

tl; dr：组件将卸载，但事件将继续触发。