如何清理 React 中的事件监听器
什么是事件监听器？
在 React 中构建 UI 时，您可能会有许多想要监听的事件。这意味着您也需要清理它们。那么，什么是事件、监听器，以及我们为什么要清理它们？
事件一般是指用户或浏览器执行的操作。用户可能会点击按钮或调整窗口大小。浏览器可能会从服务器或工作进程接收消息。
当我们编写代码来定义可能发生的事件类型以及最终检测到该事件时应运行的代码时，事件侦听器就已设置。事件是异步的，因此事件侦听器被定义为对这些事件的回调。
为什么要清理？
回调被定义为随时间监听事件。它们被声明，然后它们会一直存在，监听事件。但通常它们会有停止监听的时间。如果不再需要它们，就应该清理它们。这是因为保留事件监听器不是免费的。它需要浏览器和主机的内存和一些处理能力。
更重要的是，React 组件经常会被重新渲染，设置事件监听器的代码将有机会运行多次。设置多个监听器可能会导致错误，而我们实际上希望每次事件发生时只运行一个监听器。
此外，基于 React 的 UI 通常用于存在于长期浏览器会话中的单页应用中。这会导致内存泄漏更频繁地变得严重。
内置监听器清理
我们可能在使用事件监听器时并没有真正考虑过它们。这是因为它是 UI 工作方式和我们编写代码来使它们发挥作用的自然组成部分。例如，我们可能有一个表单，其中有一个按钮可以捕获点击事件：
import React from 'react'
function Form() {
function handleClick(evt) {
console.log('do submitting stuff')
}
return (
// form stuff...
<button onClick={handleClick}>Submit</button>
)
}
值得庆幸的是，当Form组件被卸载并离开 DOM 时，点击处理程序也会被自动移除。React 会处理它。它是内置的，你不必担心它。完成了。
手动事件监听器清理
对于任何不是内置的基于 React 元素的事件监听器的东西，您都需要进行额外的设置和清理工作。假设我们的Form组件现在监听窗口调整大小事件。它可能看起来像这样：
import React from 'react'
function Form() {
React.useEffect(function setupListener() {
function handleResize() {
console.log('Do resize stuff')
}
window.addEventListener('resize', handleResize)
return function cleanupListener() {
window.removeEventListener('resize', handleResize)
}
})
return // render...
}
请注意，React.useEffect回调可以返回的cleanupListener函数将在卸载此 React 组件时被调用，并在此进行清理。这是通过window.removeEventListener发生的。removeEventListener调用必须引用removeEventListener调用中的完全相同的函数才能正确删除侦听器。
如果你不使用 React hooks，你可以改用基于类的 React 组件生命周期方法。设置在componentDidMount中完成，清理在componentWillUnmount中完成。
总是清理
做个好公民。始终清理事件侦听器。卸载组件时使用window.removeEventListener执行此操作。通过清理，您将避免多次侦听事件和内存泄漏。拯救地球 - 清理您的事件侦听器。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~