NgRx ESLint插件：强制调用ComponentStore的super.ngOnDestroy()

在NgRx的ComponentStore开发中，正确实现生命周期钩子函数是确保资源清理和避免内存泄漏的关键。特别是ngOnDestroy方法，开发者必须记得调用super.ngOnDestroy()来确保父类的清理逻辑得到执行。

为什么需要这个规则？

ComponentStore作为NgRx提供的状态管理工具，内部维护了订阅和资源。当组件销毁时，必须通过调用父类的ngOnDestroy方法来释放这些资源。如果开发者忘记调用，可能会导致内存泄漏或其他潜在问题。

技术实现原理

ESLint规则可以通过静态代码分析来检测ComponentStore子类中的ngOnDestroy方法实现。规则会检查：

1. 类是否继承自ComponentStore
2. 是否重写了ngOnDestroy方法
3. 在重写的方法中是否调用了super.ngOnDestroy()

规则的具体行为

当检测到以下情况时，规则会报错：

• 继承了ComponentStore但没有实现ngOnDestroy方法
• 实现了ngOnDestroy方法但没有调用super.ngOnDestroy()

最佳实践建议

1. 始终在ComponentStore子类中实现ngOnDestroy方法
2. 在方法的第一行就调用super.ngOnDestroy()
3. 然后添加自定义的清理逻辑

示例代码

// 正确的实现方式
class MyStore extends ComponentStore {
  ngOnDestroy() {
    super.ngOnDestroy(); // 必须调用
    // 自定义清理逻辑
  }
}

// 会触发ESLint错误的实现
class BadStore extends ComponentStore {
  ngOnDestroy() {
    // 忘记调用super.ngOnDestroy()
  }
}

结语

这个ESLint规则的引入将帮助开发者避免常见的资源管理错误，提高NgRx应用的健壮性。通过静态代码分析在开发早期发现问题，比运行时出现内存泄漏后再调试要高效得多。