Javascript 如何使用useEffect在React中创建粘性标题

我正在尝试使用useffect钩子在React中创建一个粘性头。我认为问题在于我的IF语句逻辑，但它直接超出了我的理解范围

我的导航条在滚动过去后似乎保持良好，但当滚动回到顶部时，它不会“松开”。控制台日志记录“卡住”表明它似乎没有从false变为false

const[stack，setStuck]=useState（false）；
useffect（（）=>{
window.addEventListener（'scroll'，（e）=>{
控制台日志（卡住）；
如果（卡住===错误）{
如果（window.pageYOffset>131）{
setStuck（真）；
console.log（“卡住”）；
}
}否则{
如果（window.pageYOffset<131）{
setStuck（假）；
console.log（'unstack'）；
}
}
});
}, []);

返回大致如下所示的导航栏

---

任何帮助都将不胜感激，谢谢

所以这是一个棘手的问题。当您使用useEffect钩子时，它会在函数中变量的当前实例上获得一个闭包，因此在第一次传递时，

stack

变量被设置为默认值

false

，useEffect中的箭头函数会得到一个闭包

调用

setStuck

时，它将改变组件状态并导致重新加载。此新渲染将再次运行函数中的所有逻辑。它将调用

useState

，这将返回您存储的

stacked

值，该值现在为true，但它将其存储在新引用中。在您的示例中，

useffect

没有依赖项，因此它不会在后续渲染中执行。添加到事件侦听器中的函数在上次运行时的函数版本上仍然有一个闭包，因此，就事件侦听器而言，卡住仍然等于

false

。它的闭包来自函数的早期版本

在大多数简单的情况下，您只需要在调用

useffect

时添加

stack

。这将导致在

卡住时重新运行它

更改，并使用新的闭包将回调重新添加到正确的值。这里的问题是，每次要更改状态时，都必须删除回调

---

因此，我建议您在调用

setStuck

时，也使用该时间删除回调处理程序。然后会出现一个重新渲染器并将其添加回，但是现在，如果要创建粘性标题，那么为什么要使用react钩子呢。它可以简单地用HTML、CSS来完成