本文探讨了在 Next.js 应用中，如何根据当前路由动态设置组件默认状态的最佳实践。针对使用 useState 和 useEffect 两种方式的优缺点进行了分析，并推荐使用函数作为 useState 的参数，以避免初始状态闪烁的问题，确保用户体验的流畅性。
在构建 Next.js 应用时，经常需要根据当前路由动态设置组件的默认状态，例如高亮侧边栏中与当前页面对应的菜单项。本文将探讨两种常见的实现方式，并分析它们的优缺点，最终给出最佳实践建议。
两种实现方式
1. 使用 useEffect 覆盖默认状态
首先，可以设置一个初始的默认状态，然后在 useEffect 中根据当前路由更新状态：
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
function MyComponent({ items }) {
const router = useRouter();
const [selectedMenuItem, setSelectedMenuItem] = useState('default'); // 设置初始默认状态
useEffect(() => {
const item = items.find((item) => item.route === router.pathname);
if (item) {
setSelectedMenuItem(item.key);
}
}, [router.pathname, items]);
// ... 组件的其他部分
}这种方式的优点是代码逻辑清晰，易于理解。但是，它存在一个明显的缺点：在组件首次渲染时，会先显示默认状态，然后在 useEffect 执行后才会更新为正确的状态，这可能会导致短暂的闪烁，影响用户体验。
2. 使用函数作为 useState 的参数
另一种方式是使用函数作为 useState 的参数，该函数只会在组件首次渲染时执行：
import { useState } from 'react';
import { useRouter } from 'next/router';
function MyComponent({ items }) {
const router = useRouter();
const [selectedMenuItem, setSelectedMenuItem] = useState(() => {
const item = items.find((item) => item.route === router.pathname);
return item ? item.key : 'default';
});
// ... 组件的其他部分
}这种方式的优点是避免了初始状态的闪烁，因为状态的计算只会在组件首次渲染时执行一次，并且直接将计算结果作为初始状态。
最佳实践
综上所述，推荐使用函数作为 useState 的参数来动态设置默认状态。这种方式可以避免使用 useEffect 带来的闪烁问题，提供更流畅的用户体验。
注意事项：
- 确保传递给 useState 的函数是纯函数，即它不应该有任何副作用，并且对于相同的输入，它应该始终返回相同的输出。
- 在 useState 的函数中进行复杂的计算可能会影响组件的性能。如果计算量很大，可以考虑使用 useMemo 来缓存计算结果。
- 在 items 为空或 router.pathname 无法匹配到任何 item 的情况下，需要提供一个合适的默认值，以避免出现错误。
总结：
通过本文的分析，我们了解了在 Next.js 应用中根据当前路由动态设置组件默认状态的最佳实践。使用函数作为 useState 的参数可以有效地避免初始状态闪烁的问题，提升用户体验。在实际开发中，应该根据具体情况选择合适的实现方式，并注意代码的性能和健壮性。
