基本上我的目标是翻译这个StickyNav实现到ReactJS，并保持跨浏览器兼容性:https://codepen.io/smashingmag/pen/XWRXVXQ
我的主要问题是找到合适的方法来实现direction和prevYPosition变量与反应挂钩。我在useEffect钩子中添加了IntersectionObserver和其他辅助方法的所有设置，并尝试使用useState存储方向和prevYPosition的值。但是当我将这些变量添加到useEffect依赖项时，它会导致组件重新渲染多次，并且原始逻辑根本不起作用。
所以，我所做的第一个实现尝试是将direction和prevYPosition变量存储在实际的头中(bc我通过useRef引用了该节点)。但是它不能满足所有的用例。当你上下滚动时，它可以正常工作。但当你点击一个链接元素Nav试图从第一节第四节并不像预期的那样工作。你可以在这里看到这个实现:https://codesandbox.io/s/react-sticky-nav-i4e0y
如果有人能给我提供一些关于如何接近这个实现使它与react js正常工作的指导，我将非常感激。
提前非常感谢!
从你的问题，我认为你面临的问题与滚动。所以使用debounce来解决这个问题。
一些不公开的来源是:
- Lodash debounce - https://lodash.com/docs/#debounce
- useDebounce hook - https://usehooks.com/useDebounce/