react-native - 如何在单个useEffect中使用焦点和模糊侦听器反应原生

Question

正如您在 useEffect 中所知道的，unsubscribe如果我们将任何侦听器分配给unsubscribeconst，我们将在最后返回 ，如下所示

当我们使用

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
        // code
    })
    return unsubscribe;

}, [navigation]);

如我所愿

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
        // code
    })
    const unsubscribe2 = navigation.addListener('blur', () => {
        // code
    })

    // need to return both listeners

}, [navigation]);

标签： react-nativeuse-effectreact-navigation-v5focuslistener

Answer 1

你可以cleanup喜欢这个

useEffect(() => {

    navigation.addListener('focus', handler)
    navigation.addListener('blur', handler)
    return () => {
                navigation.removeListener('focus', handler)
                navigation.removeListener('blur', handler)
            }

},[navigation])

这里的官方示例https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup