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

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

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

---

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

您只需将所有必要的参数与调用绑定即可：

通过这种方式，您将始终获得传递给处理程序的事件、参数和其他内容

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

---

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

从“React”导入React const handleDOMClickHOC=标识符，回调=>事件=>{ const elem=document.querySelectoridentifier 如果elem&！elem.containsevent.target Callbackbalse } const ClickOutsideHOC=props=>{ 常数{ 回拨， 标识符 }=道具 const listener=handleDOMClickHOCidentifier，回调； React.useffect=>{ document.addEventListener“单击”，侦听器 return=>document.removeEventListener'单击'，侦听器 }, [] 返回道具 } 导出默认值ClickOutsideHOC`

---

但是bind创建了一个新函数，所以new referenceUsing bind消除了使用curry的需要，但我认为问题仍然存在。是的，您是对的，因此在这种情况下，当bind通过函数传递args时，调用会起作用。所以，在这种情况下，事件对象将如何传递到处理程序中？如果您想要传递事件，请将其作为null之后的第二个参数添加。让我检查一下。是的，它工作得很好。我不知道为什么我从来没有想到要存储参考：p。

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

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