使用react hooks，你将如何编写一个依赖于state的事件监听器，而不需要在每次state变化时添加和删除？

Question

The code below shows a working, but inefficient implementation of an Android BackHandler within React Native to have the app exit after two presses in two seconds. This is implemented using React hooks within the main functional component of the app.

However, due to dependency on a state variable recentlyPressedHardwareBack , the useEffect hook will cleanup then run each time the state changes, causing the BackHandler event listener to be detached and re-attached whenever the back button is pressed. How do you set up this event listener just once without constant creation and deletion, while allowing it to access a changing component state?

const [recentlyPressedHardwareBack, setRecentlyPressedHardwareBack] =
    useState(false);

  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        // Exit app if user pressed the button within last 2 seconds.
        if (recentlyPressedHardwareBack) {
          return false;
        }

        ToastAndroid.show(
          'Press back again to exit the app',
          ToastAndroid.SHORT,
        );

        setRecentlyPressedHardwareBack(true);

        // Toast shows for approx 2 seconds, so this is the valid period for exiting the app.
        setTimeout(() => {
          setRecentlyPressedHardwareBack(false);
        }, 2000);

        // Don't exit yet.
        return true;
      },
    );

    return () => backHandler.remove();
  }, [recentlyPressedHardwareBack]);

Answer 1

You could use useRef for this.

const recentlyPressedHardwareBackRef = useRef(false);
useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        // Exit app if user pressed the button within last 2 seconds.
        if (recentlyPressedHardwareBackRef.current) {
          return false;
        }

        ToastAndroid.show(
          'Press back again to exit the app',
          ToastAndroid.SHORT,
        );

        recentlyPressedHardwareBackRef.current = true;

        // Toast shows for approx 2 seconds, so this is the valid period for exiting the app.
        setTimeout(() => {
          recentlyPressedHardwareBackRef.current = false;
        }, 2000);

        // Don't exit yet.
        return true;
      },
    );

    return () => backHandler.remove();
}, [])