useBodyScrollPosition ，用于获取当前浏览器的垂直滚动位置

  function useBodyScrollPosition() {
const [scrollPosition, setScrollPosition] = useState(null);

useEffect(() => {
const handleScroll = () => setScrollPosition(window.scrollY);
document.addEventListener('scroll', handleScroll);
return () =>
  document.removeEventListener('scroll', handleScroll);
}, []);

return scrollPosition;
}

自定义 Hook 具有以下特点

1. 表面上：一个命名格式为 useXXX 的函数，但不是 React 函数式组件
2. 本质上：内部通过使用 React 自带的一些 Hook （例如 useState 和 useEffect ）来实现某些通用的逻辑

这里推荐两个强大的 React Hooks 库：React Use 和 Umi Hooks。它们都实现了很多生产级别的自定义 Hook，非常值得学习

自定义 Hook 背后的原理

即便我们切换到了自定义 Hook 中，Hook 链表的生成依旧没有改变。再来看看重渲染的情况：