反应如何停止使用导致组件重新应答的效果

Question

我有一个useeffect钩子，每当我滚动到页面顶部时，它会导致salesHeader组件中的css动画组件重新渲染。

我该怎么阻止？

我只想在滚动到页面顶部时显示和隐藏showSignUp组件，而不想让其他组件重新呈现。

const SalesScreen = () => {
const [showSignUp, setShowSignUp] = useState(false);
useEffect(() => {
window.addEventListener('scroll', onScroll, false);
return () => window.removeEventListener('scroll', onScroll, false);
}, []);
const onScroll = () => {
window.scrollY > 0 ? setShowSignUp(true) : setShowSignUp(false);
};
return (
<Layout noHeader noContainer noBottomMarginBanner>
<SalesHeader data={salesData} />
{showSignUp && <SalesSignUp />}
</Layout>
);
};

Answer 1

组件的重新呈现不是由useEffect引起的，而是由附加到滚动事件的setState引起的。这就是为什么每次滚动组件时都会重新渲染的原因。

下面的代码可以帮助您在滚动值为顶部时调用setState，从而避免多次重新渲染：

const onScroll = () => {
if (window.scrollY > 0 && !showSignUp)
setShowSignUp(true);
else if (showSignUp)
setShowSignUp(false);
}

我希望它能帮助你