Cocos Creator中EditBox销毁后未清除监听器的问题分析

问题背景

在Cocos Creator 3.8.2版本中，EditBox组件在Web平台实现时存在一个潜在的内存泄漏和空引用问题。当EditBox被销毁后，其内部注册的canvas-resize事件监听器没有被正确移除，这可能导致后续触发该事件时出现空引用异常。

问题根源分析

通过查看EditBoxImpl类的实现代码，我们可以发现问题的核心在于生命周期管理不完整：

1. 在init方法中，EditBox会注册一个canvas-resize事件监听器：

View.instance.on('canvas-resize', this._resize, this);

2. 但在clear方法中，只移除了DOM事件监听器和从游戏容器中移除DOM元素，却没有移除这个canvas-resize监听器：

public clear (): void {
    this._removeEventListeners();
    this._removeDomFromGameContainer();
    tabIndexUtil.remove(this);
    
    if (_currentEditBoxImpl === this) {
        _currentEditBoxImpl = null;
    }
    
    this._delegate = null;
}

问题影响

这种监听器泄漏会导致以下问题：

1. 内存泄漏：即使EditBox被销毁，由于事件监听器仍然存在，相关的对象无法被垃圾回收。

2. 空引用异常：当canvas尺寸发生变化触发resize事件时，会尝试调用已销毁EditBox的方法，而此时_delegate可能已经为null，导致运行时错误。

3. 性能问题：随着EditBox的频繁创建和销毁，未移除的监听器会不断累积，影响整体性能。

解决方案

在Cocos Creator 3.8.3版本中，这个问题已被修复。修复方案是在clear方法中添加对canvas-resize监听器的移除：

public clear (): void {
    this._removeEventListeners();
    this._removeDomFromGameContainer();
    tabIndexUtil.remove(this);
    
    View.instance.off('canvas-resize', this._resize, this);
    
    if (_currentEditBoxImpl === this) {
        _currentEditBoxImpl = null;
    }
    
    this._delegate = null;
}

最佳实践建议

1. 及时升级：建议使用3.8.2版本的用户升级到3.8.3或更高版本。

2. 自定义组件注意事项：开发者在自己编写组件时，应当注意：

   • 在组件初始化时注册的事件监听器
   • 必须在组件销毁时一一对应地移除
   • 特别注意跨模块的事件监听

3. 内存管理：对于Web游戏开发，良好的内存管理习惯非常重要，特别是在移动端设备上。

4. 测试验证：在修改UI元素时，特别是涉及频繁创建销毁的场景，应当进行充分的内存泄漏测试。

总结

这个问题展示了在游戏开发中资源管理的重要性。Cocos Creator团队通过及时修复这个问题，提高了框架的稳定性和可靠性。作为开发者，我们应当从这个问题中学习到组件生命周期管理的最佳实践，确保资源的正确释放，避免类似问题的发生。