在 Next.js 应用中，如何根据当前路由动态设置侧边栏默认选中项的最佳实践。针对使用 useState 和 useEffect 组合，以及直接在 useState 初始化时计算默认值两种方法，分析了各自的优缺点，并推荐使用函数式更新 useState 的方式，以避免页面闪烁问题，确保用户体验。
在构建具有侧边栏导航的 Next.js 应用时，一个常见的需求是根据当前路由高亮显示对应的菜单项，尤其是在页面刷新时，需要保持选中状态的正确性。 通常，我们会使用 useState 来管理侧边栏的选中项，并根据当前路由进行更新。 以下将讨论两种实现方式，并分析它们的优缺点，最终给出推荐的最佳实践。
方法一：使用 useEffect 更新状态
这种方法首先使用一个初始值初始化 selectedMenuItem 状态，然后在 useEffect 中根据当前路由计算并更新状态。
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
function Sidebar({ items }) {
const [selectedMenuItem, setSelectedMenuItem] = useState('defaultKey'); // 初始值
const router = useRouter();
useEffect(() => {
const item = items.find((item) => item.route === router.pathname);
if (item) {
setSelectedMenuItem(item.key);
}
}, [router.pathname, items]); // 依赖项包含 router.pathname 和 items
return (
-
{items.map((item) => (
- {item.label} ))}
这种方法的主要缺点是：useEffect 中的代码会在组件首次渲染后执行，这意味着 selectedMenuItem 会先被设置为初始值，然后在第二次渲染时才会被更新为正确的值。 这会导致在页面加载时出现闪烁，用户体验不佳。
方法二：在 useState 初始化时计算默认值
这种方法直接在 useState 的初始化函数中计算 selectedMenuItem 的默认值。
import { useState } from 'react';
import { useRouter } from 'next/router';
function Sidebar({ items }) {
const router = useRouter();
const [selectedMenuItem, setSelectedMenuItem] = useState(() => {
const item = items.find((item) => item.route === router.pathname);
return item ? item.key : 'defaultKey'; // 提供默认值，避免 undefined
});
return (
-
{items.map((item) => (
- {item.label} ))}
这种方法使用函数作为 useState 的参数。 该函数只会在组件首次渲染时执行一次，并且其返回值将作为 selectedMenuItem 的初始值。 这样可以避免页面闪烁的问题，因为 selectedMenuItem 在第一次渲染时就已经被设置为正确的值。
最佳实践：使用函数式更新 useState
推荐使用第二种方法，即在 useState 初始化时计算默认值。 这种方法可以避免页面闪烁的问题，并且代码更简洁。
注意事项
- 提供默认值： 确保在 items.find 没有找到匹配项时，提供一个默认的 selectedMenuItem 值，避免出现 undefined 错误。
- 依赖项： useEffect 方法中，要确保 useEffect 的依赖项包含了所有可能导致 selectedMenuItem 发生变化的值，例如 router.pathname 和 items。
- 性能优化： 如果 items 是一个很大的数组，并且 items.find 的计算成本很高，可以考虑使用 useMemo 来缓存计算结果，以提高性能。
总结
在 Next.js 应用中，根据当前路由动态设置侧边栏默认选中项的最佳实践是使用函数式更新 useState 的方式。 这种方法可以避免页面闪烁的问题，并提供更好的用户体验。 记住，始终要考虑提供默认值，并确保 useEffect 的依赖项正确，以避免潜在的错误。
