本文旨在解决 React 应用中使用自定义导航时，需要点击两次返回按钮才能正确返回上一页的问题。通过分析问题的根源，即 React 的 StrictMode 在开发环境下重复渲染组件，并结合官方文档的建议，提供两种解决方案：一是通过条件判断避免重复执行副作用函数，二是优化代码逻辑，减少对 useEffect 的依赖。
在 React 应用中实现自定义导航，并将状态存储在本地存储和 URL 中，是一种常见的需求。然而，开发者可能会遇到一个问题：当点击返回按钮时，第一次点击只是恢复了之前的状态，但 URL 没有改变，需要再次点击才能真正返回上一页。这通常是由于 React 的 StrictMode 在开发模式下重复渲染组件所导致的。
StrictMode 是 React 提供的一个非常有用的工具，它可以帮助开发者发现代码中的潜在问题。在开发环境下，StrictMode 会将组件渲染两次，以便检测出不纯的渲染函数、副作用等问题。虽然这在开发阶段很有帮助，但有时也会导致一些意想不到的行为，比如本文中描述的返回按钮需要点击两次的问题。
问题分析
问题的核心在于 useEffect 的执行时机。在提供的代码中，useEffect 被用来更新 URL 和本地存储，以及监听 popstate 事件来更新状态。由于 StrictMode 的存在，这些 useEffect 会被执行两次，导致状态和 URL 的不一致。
解决方案
针对这个问题，有两种主要的解决方案：
1. 条件判断避免重复执行副作用函数
可以在 useEffect 中添加条件判断，确保只有在状态真正发生变化时才执行副作用函数。例如，可以比较当前的状态和本地存储中的状态，如果相同则不执行更新操作。
useEffect(() => {
const updateQueryParams = () => {
const storedFilters = JSON.parse(localStorage.getItem(key));
// Add condition to check if state has changed
if (storedFilters && storedFilters.st1 === st1 && storedFilters.st2 === st2) {
return; // State hasn't changed, no need to update
}
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]);通过添加这个条件判断，可以避免在 StrictMode 导致的重复渲染中执行不必要的更新操作。
2. 优化代码逻辑，减少对 useEffect 的依赖
React 官方文档建议，尽量避免使用 useEffect 来处理可以在渲染阶段完成的任务。可以考虑将状态更新的逻辑放在事件处理函数中，而不是放在 useEffect 中。
例如，可以直接在 setSt1 和 setSt2 的回调函数中更新 URL 和本地存储：
const setSt1WithUpdate = (newValue) => {
setSt1(newValue);
updateUrlAndStorage(newValue, st2);
};
const setSt2WithUpdate = (newValue) => {
setSt2(newValue);
updateUrlAndStorage(st1, newValue);
};
const updateUrlAndStorage = (newSt1, newSt2) => {
const queryParams = new URLSearchParams();
if (newSt1) queryParams.set('state1', newSt1);
if (newSt2) queryParams.set('state2', newSt2);
const queryString = queryParams.toString();
const newUrl = `${window.location.pathname}?${queryString}`;
window.history.pushState({ path: newUrl }, '', newUrl);
localStorage.setItem(key, JSON.stringify({ st1: newSt1, st2: newSt2 }));
};这样可以避免使用 useEffect 来同步状态和 URL，从而减少了 StrictMode 的影响。
注意事项
- 在生产环境中，StrictMode 不会重复渲染组件，因此这个问题只会在开发环境中出现。
- 在使用 useEffect 时，一定要仔细考虑依赖项，避免不必要的更新操作。
- 尽量遵循 React 官方文档的建议，减少对 useEffect 的依赖，提高代码的可读性和可维护性。
总结
在 React 应用中使用自定义导航时，需要注意 StrictMode 带来的影响。通过添加条件判断或优化代码逻辑，可以有效地解决返回按钮需要点击两次的问题。同时，也应该遵循 React 官方文档的建议，编写高质量的 React 代码。
