react Native 每次进入页面都会执行的hooks

这里的写法是函数组件，由于用class组件的时候不多，就不怎么用生命周期函数（我也看了生命周期函数，只有进入页面执行一次，然后去其他页面之后，再返回这个页面就不会执行了。）

1、 使用 useFocusEffect 

import {useFocusEffect} from '@react-navigation/native';  

  useFocusEffect(React.useCallback(() => {
		console.log('激活/进入当前页面');
  }, []));

2、使用 navigation.addListener

import { useNavigation } from '@react-navigation/native';

  const navigation = useNavigation()  

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      console.log("当前页面获取到焦点了。")
    });
    return () => {
      unsubscribe();
    };
  }, [navigation]);

    useEffect(() => {
        const unsubscribeBlur = navigation.addListener('blur', () => {
            console.log('失去焦点');
            expLoreStore.clearSound();
        });
        return () => {
            unsubscribeBlur();
        };
    }, [navigation]);

 

        不同点：useFocusEffect是第一次进入这个页面以及后续进入都会执行的函数。

navigation.addListener 是第一次激活当前页面的时候，不会执行，后续每次返回到这个页面的时候，才会执行。