使用 useRef 钩子进行滚动检测导致重新渲染

Question

我在布局组件中使用 useRef 挂钩来检测其子项（pageContent）的滚动值。 然后我有条件地显示一个按钮以滚动回顶部。

功能正常工作，但是当我在 pageComponent 子项 ( <route.component/> ) 中 console.log 时，它告诉我每次按钮显示/隐藏时组件都在重新呈现（scrollTop 值超过 500）

这是我的布局组件：

function Layout() {
    const [showBackToTopButton, setShowBackToTopButton] = useState(false);
    const pageContentRef = useRef<HTMLDivElement>(null);

    function handleScroll() {
        const mainContent = pageContentRef.current;
        if (mainContent) {
            if (mainContent.scrollTop > 500) {
                setShowBackToTopButton(true);
            } else {
                setShowBackToTopButton(false);
            }
        }
    }

    function handleClickBackTop() {
        const mainContent = pageContentRef.current;
        if (mainContent) mainContent.scrollTo({ top: 0, behavior: 'smooth' });
    }

    useEffect(() => {
        const mainContent = pageContentRef.current;
        if (mainContent)
            mainContent.onscroll = function () {
                handleScroll();
            };
    }, []);

    return (
        <>
            <div className='drawer drawer-mobile'>
                <input
                    id='left-sidebar-drawer'
                    type='checkbox'
                    className='drawer-toggle'
                />
                <PageContent pageContentRef={pageContentRef} />
                <LeftSidebar />
            </div>

            {showBackToTopButton && (
                <Button
                    className='back-to-top-button absolute right-0 bottom-10'
                    id='back-to-top'
                    onClick={handleClickBackTop}
                >
                    <i className='fa-solid fa-arrow-up' />
                </Button>
            )}
        </>
    );
}

export default Layout;

这是 PageContent 组件：

interface PageContentProps {
    pageContentRef: React.RefObject<HTMLDivElement>;
}

function PageContent({ pageContentRef }: PageContentProps) {
    return (
        <div className='drawer-content flex flex-col '>
            <Header />
            <main className='flex-1 overflow-y-auto pt-8 px-6' ref={pageContentRef}>
                <Suspense fallback={<SuspenseContent />}>
                    <Routes>
                        {routes.map((route, key) => {
                            return (
                                <Route
                                    key={key}
                                    path={`${route.path}`}
                                    element={<route.component name={route.name} />}
                                />
                            );
                        })}

                        {/* Redirecting unknown url to 404 page */}
                        <Route path='*' element={<NotFound />} />
                    </Routes>
                </Suspense>
            </main>
        </div>
    );
}

export default PageContent;

考虑到 useState 值，这是正常行为吗？

我尝试使用 useMemo，但未能解决我的问题。

这不是什么大问题，因为组件不会渲染十分之一次，但如果它们只渲染一次会更干净......

Answer 1

原因是当PageContent组件值改变时， Layout组件重新渲染。

pageContent组件包装在memo()钩子中。

export default React.memo(PageContent);

其次，将handleScroll function 包裹在返回 memorize function 的 useMemo 钩子中。

    useMemo(function handleScroll() {
        const mainContent = pageContentRef.current;
        if (mainContent) {
            if (mainContent.scrollTop > 500) {
                setShowBackToTopButton(true);
            } else {
                setShowBackToTopButton(false);
            }
        }
    }, [dependency]);

Answer 2

我找到了将我的 PageContent 组件包装在备忘录中的解决方案

const PageContent = React.memo(({ pageContentRef }: PageContentProps) => {
    return (
        // ...
    );
});

孩子们现在只被渲染一次。 希望它可以帮助其他人