react-native AppState 正确使用场景

App States 【react-native 0.63】

• active - 应用正在前台运行
• background - 应用正在后台运行。用户可能面对以下几种情况：
  • 在别的应用中
  • 停留在桌面
  • 对 Android 来说还可能处在另一个Activity中（即便是由你的应用拉起的）
• [iOS] inactive - 此状态表示应用正在前后台的切换过程中，或是处在系统的多任务视图，又或是处在来电状态中。

在 0.63版本中官方文档给出的例子是 Hooks方式， 对于组件的方式通常如下：
不过我们使用中会存在以下误区：

import {
  AppState,
} from 'react-native';

AppState.addEventListener('change', (state) => {
    ....
})

componentWillUnmount() {
  AppState.removeEventListener('change')
}

这时候会发现监听依旧存在，移除不掉，这里并不是组件没有销毁，而是使用方式不对

官方的方法如下

removeEventListener()

removeEventListener(type, handler);

正确处理应该是这样

AppState.addEventListener("change", this._handleAppStateChange);


_handleAppStateChange = (state) => {
}

// 需要移除， 或者组件销毁移除
componentWillUnmount() {
   AppState.removeEventListener("change", this._handleAppStateChange);
}