为什么我的useEffect运行，即使没有在依赖关系的变化?

Question

我制作了一个按钮和一个状态来切换按钮点击时的内容。我有20个项目要显示，在初始状态下只有6个项目显示。单击该按钮时，将显示全部20个项目。这是用例。然而，当我浏览页面并回到这个页面时，即使状态'showContent'保持不变，useEffect也会运行。我用上下文管理状态，而导航是用react router完成的。

const [showContent, setShowContent] = useState(false);

useEffect(() => {
window.scrollTo({top: 1400, left: 0, behavior: 'smooth' });
console.log(showContent)
}, [showContent]);
<button onClick={() => setShowContent(!showContent)}>
{showContent ? "Show Less" : "Show More"}
</button>

这是我试过的代码，它的工作。然而，每当我访问这个页面的"窗口，滚动到"正在运行。谢谢你的帮助1:)

Answer 1

FromuseEffectdocs:

setup:函数与你的效果的逻辑。你的setup函数也可以选择返回一个清理函数。当你的组件第一次被添加到DOM中时，React会运行你的setup函数。每次使用更改的依赖项重新渲染后，React将首先使用旧值运行清理函数(如果您提供了它)，然后使用新值运行setup函数。当你的组件从DOM中移除后，React会最后一次运行你的清理函数。

https://react.dev/reference/react/useEffect useeffect

正如在注释中解释的那样，useEffect将始终运行一次，并且(如果依赖项更改)将在稍后再次运行。

您可以尝试在第一次运行时不做任何事情:

useEffect(() => {
if(!showContent) return;
window.scrollTo({top: 1400, left: 0, behavior: 'smooth' });
console.log(showContent)
}, [showContent]);

我猜1400是你计算当你显示剩下的14个项目时向下滚动的距离。对于showContent，您可以使用整数来表示显示的项数，而不是布尔值。

const [visibleItems, setVisibleItems] = useState(6);

useEffect(() => {
const top = (visibleItems - 6) * 100; // 0 for 6 items, 1400 for 20
window.scrollTo({top, left: 0, behavior: 'smooth' });
console.log(visibleItems)
}, [visibleItems]);
<button onClick={() => setVisibleItems(visibleItems === 6 ? 20 : 6)}>
{showContent ? "Show Less" : "Show More"}
</button>

有了这个改变，你的"show less"还将滚动回顶部(如果您想用分页替换显示更多/更少，那么这也适用于金额>20)。