javascript - 组件卸载后正确删除事件处理程序

Question

我正在尝试实现一个 HOC，如果用户单击外部，它将卸载组件。这是我的 HOC ClickOutsideHOC.js

import React from 'react'

const ClickOutsideHOC = props => {

const {
    callback,
    identifier
} = props

React.useEffect(() => {
    document.addEventListener('click', handleDOMClickHOC(identifier, callback))
    return () => document.removeEventListener('click', handleDOMClickHOC) //  this needs repair
}, [])

    return props.children
}

const handleDOMClickHOC = (identifier, callback) => event => {
    const elem = document.querySelector(identifier)
    if (elem && !elem.contains(event.target))
        callback(false)
}
export default ClickOutsideHOC`

这就是我使用 HOC 的方式。 SomeOtherComponent.js

const [toggleValue, setToggleValue] = React.useState(false)
//
//
//
{
    toggleValue ? 
    <ClickOutsideHOC
        identifier=".some-class-name"
        callback={setToggleValue}
    >
        <div className="some-class-name">
        </div>
    </ClickOutsideHOC>: ''
}

这似乎有效。问题是我不确定删除事件处理程序的过程。 handleDOMClickHOC 函数返回一个新的函数引用，我没有将其存储在任何地方。我认为这会导致内存泄漏。我可以在 chrome 调试器控制台的 Event Listeners 选项卡中看到多个处理程序已注册到 DOM。我该如何编写它才能确保不会因取消订阅的事件处理程序而导致内存泄漏？

Answer 1

那么，如果您知道需要引用才能删除监听器，为什么不创建它呢？

import React from 'react'

const handleDOMClickHOC = (identifier, callback) => event => {
  const elem = document.querySelector(identifier)
  if (elem && !elem.contains(event.target))
    callback(false)
}

const ClickOutsideHOC = props => {

  const {
    callback,
    identifier
  } = props

  const listener = handleDOMClickHOC(identifier, callback);

  React.useEffect(() => {
    document.addEventListener('click', listener)
    return () => document.removeEventListener('click', listener)
  }, [])

  return props.children
}
export default ClickOutsideHOC`