reactjs - 做出反应。实现 setState 方法的去抖函数

Question

我正在开发一个简单的 hoc 组件，它将视口尺寸传递给它的孩子。在窗口调整大小时，我启动 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：组件将卸载，但事件将继续触发。