Nextjs 优化滚动答案

【问题标题】：Nextjs Optimization scrollNextjs 优化滚动
【发布时间】：2021-10-16 22:07:29
【问题描述】：

我正在尝试获取滚动位置。我的代码运行良好，但每次滚动函数时总是重新渲染 React 组件。我知道原因：每次滚动时，我都会更新组件状态中的滚动位置。

export function Home() {
    const [scrollPosition, setScrollPosition] = useState(0);

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

    console.log('render function')

    return null
}

有没有办法优化这段代码？

【问题讨论】：

尝试限制/去抖动你的处理程序，它会减少一些重新渲染。你也可以看看这个：reactjs.org/docs/… 相关：stackoverflow.com/a/56297625/11613622,stackoverflow.com/q/54666401/11613622

标签： javascript reactjs scroll

【解决方案1】：

考虑使用这个自定义钩子。我用过它，它是超级优化的。 https://github.com/n8tb1t/use-scroll-position

【讨论】：