下面的代碼展示了一個在 React Native 中有效但低效的 Android 實作，BackHandler讓應用在兩秒內按兩次后退出。這是使用應用程式主要功能組件中的 React 鉤子實作的。
然而，由于對狀態變數recentlyPressedHardwareBack的依賴，useEffect鉤子會在每次狀態改變時清理然后運行，導致BackHandler事件監聽器在按下后退按鈕時被分離并重新連接。如何在不不斷創建和洗掉的情況下只設定一次此事件偵聽器，同時允許它訪問不斷變化的組件狀態？
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]);
uj5u.com熱心網友回復：
您可以為此使用 useRef。
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();
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/477999.html
標籤：javascript 反应 反应式 反应钩子
上一篇：在這種情況下如何清除超時？
下一篇：WARNViewPropTypes將從ReactNative中移除。遷移到從'deprecated-react-native-prop-types'匯出的ViewPropTypes