本文针对React应用中使用自定义导航时，出现“返回按钮需要点击两次才能生效”的问题，进行了深入分析。通过排查代码逻辑和利用React Strict Mode的特性，定位问题根源在于useEffect的重复执行。文章提供了两种解决方案：一是添加条件判断避免重复执行，二是优化代码逻辑，减少对useEffect的依赖。旨在帮助开发者更好地理解和解决React应用中自定义导航的常见问题。
在使用React构建单页应用（SPA）时，自定义导航是一种常见的需求。通过操作浏览器的history API，可以实现页面间的无刷新跳转，提升用户体验。然而，在实现自定义导航的过程中，开发者可能会遇到一些问题，例如点击返回按钮需要两次才能生效。本文将深入探讨这个问题的原因，并提供相应的解决方案。
问题分析
当出现返回需要双击的问题时，通常是因为window.history.pushState被重复调用，导致历史记录中存在连续的相同状态。这可能是由以下原因造成的：
- React Strict Mode: React的Strict Mode会在开发环境下对组件进行双重渲染，以便发现潜在的问题。这会导致useEffect中的代码被执行两次，从而重复调用pushState。
- 不恰当的依赖项: useEffect的依赖项如果设置不当，可能会导致不必要的重复执行。例如，如果依赖项包含了频繁变化的值，即使state没有真正改变，useEffect也会重新执行。
解决方案
针对上述问题，可以采取以下两种解决方案：
方案一：添加条件判断
在useEffect中添加条件判断，确保只有在state真正发生改变时才调用pushState。这可以通过比较当前state和上一次的state来实现。
const useMyHook = (key) => {
const [st1, setSt1] = useState(null);
const [st2, setSt2] = useState(null);
const [initialLoad, setInitialLoad] = useState(true);
const previousSt1 = useRef(null);
const previousSt2 = useRef(null);
useEffect(() => {
const storedFilters = JSON.parse(localStorage.getItem(key));
if (storedFilters && initialLoad) {
setSt1(storedFilters.st1);
setSt2(storedFilters.st2);
}
setInitialLoad(false);
}, [initialLoad, key]);
useEffect(() => {
// 只有当 st1 或 st2 真正改变时才更新 URL 和 localStorage
if (st1 !== previousSt1.current || st2 !== previousSt2.current) {
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();
previousSt1.current = st1;
previousSt2.current = st2;
}
}, [st1, st2, key]);
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 };
};在这个方案中，我们使用了useRef来存储上一次的state值，并在useEffect中比较当前state和上一次的state，只有当它们不相等时才调用pushState。
方案二：优化代码逻辑
另一种解决方案是避免在useEffect中直接调用pushState。可以考虑将更新URL和localStorage的逻辑放在事件处理函数中，例如在点击导航链接时更新URL和localStorage。
这种方法可以避免useEffect的重复执行，并且可以更好地控制URL和localStorage的更新时机。
注意事项
- Strict Mode的影响: 在开发环境下，如果启用了React Strict Mode，需要特别注意useEffect的执行次数。可以通过移除Strict Mode来验证是否是Strict Mode导致的问题。
- 依赖项的设置: 仔细检查useEffect的依赖项，确保只有真正需要监听的值才被添加到依赖项列表中。
- 避免过度使用useEffect: 如果可以在事件处理函数中完成的操作，尽量不要放在useEffect中。
总结
在使用React构建自定义导航时，需要注意window.history.pushState的调用次数，避免重复调用导致返回需要双击的问题。通过添加条件判断或优化代码逻辑，可以有效地解决这个问题。同时，需要注意React Strict Mode的影响，并合理设置useEffect的依赖项。 通过理解问题的原因和掌握解决方案，可以更好地构建React应用，提升用户体验。
