在 React Native 中使用 withNavigationFocus 的内存泄漏问题答案

【问题标题】：Memory leak problem using withNavigationFocus in React Native在 React Native 中使用 withNavigationFocus 的内存泄漏问题
【发布时间】：2019-10-04 01:41:37
【问题描述】：

我使用withNavigationFocus 设置了一个侦听器，这样每次用户到达屏幕或离开屏幕时，都会触发某个事件。但是，我收到以下错误：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消所有订阅和异步任务

const PleaseSignIn = props => {
    const {
        state: { authOpen },
        authModal
    } = useContext(Context)

    const focusListener = props.navigation.addListener('didFocus', () => {
        retrieveToken()     
    })

    const retrieveToken = async () => {
        try {
            const token = await AsyncStorage.getItem(LOGIN_TOKEN)
            if(!token) {
                authModal()
            }
        } catch (err) {
            throw new Error(err)
        }
    }

    if(!authOpen) {
        return (
            <View style={styles.container}> 
                <Auth navigation={props.navigation} />
                <Signup navigation={props.navigation}  />
                <Signin navigation={props.navigation} />
            </View>
        )
    }
    return props.children
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})

export default withNavigationFocus(PleaseSignIn)

【问题讨论】：

标签： reactjs react-native asynchronous memory-leaks listener

【解决方案1】：

设置好事件监听器后，我们还必须在屏幕卸载时停止监听事件。您有功能组件，可以使用钩子订阅和取消订阅。像这样的：

 useEffect(() => {
 const focusListener = 
 props.navigation.addListener('didFocus', async() => {
      await retrieveToken();     
      });

   // returned function will be called on component 
    //unmount 
   return () => {
    focusListener.remove();
   }
   }, []);

【讨论】：