reactjs - React Hooks，如何实现useHideOnScroll hook？

Question

const shouldHide = useHideOnScroll();
return shouldHide ? null : <div>something</div>

useHideOnScroll 行为应该返回更新后的值，而不是在每次滚动时返回，而仅在发生更改时返回。

伪逻辑如下:

if (scrolledDown && !isHidden) {
        setIsHidden(true);
      } else if (scrolledUp && isHidden) {
        setIsHidden(false);
      }

换句话说，如果向下滚动没有隐藏，则隐藏。如果向上滚动并隐藏，则取消隐藏。但是，如果向下滚动并隐藏，则什么也不做，或者向上滚动但不隐藏，则什么都不做。

如何使用钩子(Hook)实现它？

Answer 1

这里:

const useHideOnScroll = () => {
  const prevScrollY = React.useRef<number>();
  const [isHidden, setIsHidden] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      setIsHidden(isHidden => {
        const scrolledDown = window.scrollY > prevScrollY.current!;
        if (scrolledDown && !isHidden) {
          return true;
        } else if (!scrolledDown && isHidden) {
          return false;
        } else {
          prevScrollY.current = window.scrollY;
          return isHidden;
        }
      });
    };

    console.log("adding listener");
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  return isHidden;
};

const Navbar = () => {
  const isHidden = useHideOnScroll();
  console.info("rerender");
  return isHidden ? null : <div className="navbar">navbar</div>;
};

export default Navbar;

您可能担心 setIsHidden 会导致在每个 onScroll 上重新呈现，因为它总是返回一些新的状态值，但是来自 useState 的 setter 是足够智能，仅当值实际发生变化时才进行更新。

此外，您的 .navbar(我已为其添加了一个类)在出现时不应更改布局，否则您的代码段将陷入无限循环.这里也有适合它的样式:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: rgba(255, 255, 255, 0.8);
}

完整代码沙箱:https://codesandbox.io/s/13kr4xqrwq