前端/移动开发面试题更新 2026-08-05

在 React 中,当组件即将卸载时,开发者是否需要手动移除挂载在原生 DOM 元素上的事件监听器以及清除定时器?请说明这样做的理由。

前端/移动开发风险判断技术原理React

考察说明

考察对 React 组件生命周期中资源清理机制的理解。

回答思路

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