reactjs - 带有 React Hooks 和 IntersectionObserver API 的粘性导航标头

Question

基本上我的目标是将这个 StickyNav 实现转换为 ReactJS 并保持跨浏览器兼容性： https ://codepen.io/smashingmag/pen/XWRXVXQ

我遇到的主要问题是找到使用反应钩子实现directionand变量的正确方法。prevYPosition我在一个钩子中添加了 IntersectionObserver 和其余辅助方法的所有设置useEffect，并尝试使用useState. 但是当我将这些变量添加到 useEffect 依赖项时，它会导致组件多次重新渲染，并且原始逻辑根本不起作用。

所以，作为我的第一次实现尝试，我所做的是将directionandprevYPosition变量存储在实际的标头中（bc 我有对该节点 thru 的引用useRef）。但它并不能满足所有用例。当您向上和向下滚动时，它可以正常工作。但是，当您单击导航上的链接元素试图从第 1 节跳到第 4 节时，它不会按预期工作。您可以在这里看到该实现： https ://codesandbox.io/s/react-sticky-nav-i4e0y

如果有人可以为我提供一些有关如何处理此实现以使其与 react js 正常工作的指导，我将不胜感激。

非常感谢您！

标签： reactjsreact-hooksintersection-observer

Answer 1

根据您的问题，我认为您在滚动时遇到了问题。所以使用 debounce 来解决这个问题。

一些去抖源是：

1. Lodash 去抖 - https://lodash.com/docs/#debounce
2. useDebounce 钩子 - https://usehooks.com/useDebounce/