如何解决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提供了对此现象的更完整说明。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。