在 React 中,当组件即将卸载时,开发者是否需要手动移除挂载在原生 DOM 元素上的事件监听器以及清除定时器?请说明这样做的理由。
考察说明
考察对 React 组件生命周期中资源清理机制的理解。
回答思路
- 【回答框架 1】需要手动清除。React 组件卸载后,其内部创建的定时器如 setTimeout、setInterval 不会自动取消,若不清理,回调仍会执行并可能操作已卸载组件的状态,导致内存泄漏或错误。
- 【回答框架 2】对于直接绑定在原生 DOM 元素上的事件监听器,如通过 addEventListener 添加的,React 的合成事件系统不会自动移除它们。组件卸载时,若未移除,监听器仍会保留,造成内存泄漏并可能引发非预期行为。
- 【回答框架 3】正确的做法是在 useEffect 或 componentWillUnmount 中返回清理函数或调用 removeEventListener 和 clearInterval,确保资源在组件卸载时被释放。
- 【回答框架 4】React 的合成事件在组件卸载后会被自动处理,但原生事件和定时器必须手动清理。
- 【回答框架 5】清理操作应谨慎,确保只移除自己添加的监听器或定时器,避免误删其他组件的资源。
- 【关键点 1】React 组件卸载时不会自动清除定时器和原生 DOM 事件监听器。
- 【关键点 2】未清理的定时器或监听器可能导致内存泄漏和状态操作错误。
- 【关键点 3】应在 useEffect 清理函数或 componentWillUnmount 中手动清理这些资源。
- 【易错点 1】不要依赖 React 自动清理原生事件监听器,必须手动移除。
- 【易错点 2】清理函数中要避免重复清理或清理无效资源。
- 【易错点 3】在函数组件中,注意 useEffect 的清理函数会在每次依赖变化时执行,而不仅是卸载时。