React js组件在滚动事件中重新渲染两次

问题描述

我想在向下滚动时使标题不可见，而当向上滚动时使其不可见

const [showHeaderState,setShowHeaderState] = useState(true);
      const prevScrollpos = useRef(window.pageYOffset);
    
      const handleScroll = () => {
        const currentScrollPos = window.pageYOffset;
        prevScrollpos.current < currentScrollPos
          ? setShowHeaderState(false)
          : setShowHeaderState(true);
        prevScrollpos.current = currentScrollPos;
      };
    
      useEffect(() => {
        window.addEventListener('scroll',handleScroll);
        return () => window.removeEventListener('scroll',handleScroll);
      },[]);
    
      console.log(showHeaderState);

此代码有效

但是当我显示渲染状态时，该组件被渲染了两次

滚动滚动向上记录 true 两次

滚动滚动向下记录两次 false

任何解决方案??

解决方法

仅仅因为console.log正在运行并不意味着您的组件实际上渲染了两次，因为React可以运行组件功能的某些部分而无需在完整的渲染中提交这些更改。如果要检查是否正在执行其他完整的渲染，请将console.log放置在没有依赖项的效果钩子内（每次重新渲染时都会运行）：

useEffect(() => { console.log("render") })

并查看记录了多少次。每个状态更改只能运行一次。

This answer提供了对此现象的更完整说明。