正如摘要所述，本文将深入探讨 React 应用中自定义导航返回需双击的问题，并提供解决方案。
在 React 应用中实现自定义导航时，开发者可能会遇到需要点击两次返回按钮才能正确返回上一页面的问题。这通常与状态管理、URL 更新以及 window.history 的使用方式有关。下面我们将通过一个具体的例子来分析这个问题，并提供相应的解决方案。
问题分析
以下代码展示了一个使用 useEffect 钩子来管理状态、更新 URL 以及处理 popstate 事件的自定义 hook：
const useMyHook = (key) => {
const [st1, setSt1] = useState(null);
const [st2, setSt2] = useState(null);
const [initialLoad, setInitialLoad] = useState(true); // to find if it is loaded
useEffect(() => {
const storedFilters = JSON.parse(localStorage.getItem(key));
if (storedFilters && initialLoad) {
setSt1(storedFilters.st1);
setSt2(storedFilters.st2);
}
setInitialLoad(false); // once loaded set it to false
}, [initialLoad, key]);
useEffect(() => {
const updateQueryParams = () => {
const queryParams = new URLSearchParams();
if (st1) queryParams.set('state1', st1);
if (st2) queryParams.set('state2', st2);
const queryString = queryParams.toString();
const newUrl = `${window.location.pathname}?${queryString}`;
window.history.pushState({ path: newUrl }, '', newUrl);
localStorage.setItem(key, JSON.stringify({ st1, st2 }));
};
updateQueryParams();
}, [st1, st2, key]);
useEffect(() => {
const handlePopState = () => {
const queryParams = new URLSearchParams(window.location.search);
setApps(queryParams.get('state1') ? parseInt(queryParams.get('state1')) : null);
setLoc(queryParams.get('state2') ? parseInt(queryParams.get('state2')) : null);
};
window.addEventListener('popstate', handlePopState);
return () => {
window.removeEventListener('popstate', handlePopState);
}
}, []);
return { st1, setSt1, st2, setSt2 };
};问题在于，在开发环境下，React 的严格模式 (Strict Mode) 会导致组件被渲染两次。这意味着 useEffect 中的逻辑也会被执行两次。当用户点击返回按钮时，popstate 事件触发，handlePopState 函数被调用，状态被更新。但是，由于严格模式的影响，状态的更新可能并没有立即反映到 URL 上，导致第一次点击返回按钮时，URL 没有改变，第二次点击才能正确返回。
解决方案
解决此问题的一个方法是针对严格模式进行特殊处理，避免不必要的重复执行。更推荐的做法是，重新审视 useEffect 的依赖项和逻辑，确保它们只在必要的时候执行。
- 检查并优化 useEffect 的依赖项： 确保 useEffect 的依赖项列表只包含真正需要监听的变量。避免不必要的依赖项，可以减少 useEffect 的执行次数。
- 避免在 useEffect 中执行副作用： 尽量将副作用操作移到 useEffect 之外，或者使用 useRef 来存储一些状态，避免在每次渲染时都执行副作用。
- 考虑使用 useMemo 和 useCallback： 如果某些计算或函数是比较耗时的，可以使用 useMemo 和 useCallback 来缓存结果，避免重复计算。
- 移除严格模式 (不推荐)： 虽然可以移除严格模式来解决问题，但这会错过严格模式带来的潜在问题检测，因此不推荐。
示例代码优化
以下代码展示了一种可能的优化方案，通过检查 st1 和 st2 的变化，避免不必要的 URL 更新：
const useMyHook = (key) => {
const [st1, setSt1] = useState(null);
const [st2, setSt2] = useState(null);
const [initialLoad, setInitialLoad] = useState(true);
useEffect(() => {
const storedFilters = JSON.parse(localStorage.getItem(key));
if (storedFilters && initialLoad) {
setSt1(storedFilters.st1);
setSt2(storedFilters.st2);
}
setInitialLoad(false);
}, [initialLoad, key]);
const updateQueryParams = useCallback(() => {
const queryParams = new URLSearchParams();
if (st1) queryParams.set('state1', st1);
if (st2) queryParams.set('state2', st2);
const queryString = queryParams.toString();
const newUrl = `${window.location.pathname}?${queryString}`;
window.history.pushState({ path: newUrl }, '', newUrl);
localStorage.setItem(key, JSON.stringify({ st1, st2 }));
}, [st1, st2]);
useEffect(() => {
updateQueryParams();
}, [st1, st2, updateQueryParams]);
useEffect(() => {
const handlePopState = () => {
const queryParams = new URLSearchParams(window.location.search);
setSt1(queryParams.get('state1') ? parseInt(queryParams.get('state1')) : null);
setSt2(queryParams.get('state2') ? parseInt(queryParams.get('state2')) : null);
};
window.addEventListener('popstate', handlePopState);
return () => {
window.removeEventListener('popstate', handlePopState);
};
}, []);
return { st1, setSt1, st2, setSt2 };
};注意事项
- 在开发环境下，务必开启 React 的严格模式，以便及时发现潜在问题。
- 仔细检查 useEffect 的依赖项，确保它们只包含真正需要监听的变量。
- 避免在 useEffect 中执行不必要的副作用操作。
- 合理使用 useMemo 和 useCallback 来优化性能。
总结
解决 React 自定义导航返回需双击的问题，需要深入理解 React 的生命周期和严格模式的特性。通过仔细分析代码，优化 useEffect 的使用方式，可以有效地避免此类问题。希望本文能帮助开发者更好地理解和解决 React 应用中的导航问题。
