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

Question

我想让标题在我向下滚动时不可见，当我向上滚动时让它可见

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两次

任何解决方案？？

Answer 1

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

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

并查看它被记录了多少次。每次状态更改只应运行一次。

This answer 对这一现象提供了更完整的解释。