时间戳

首页 > 解决方案 > 使用 useRef 在 React Hooks 中恢复滚动位置不稳定

javascript - 使用 useRef 在 React Hooks 中恢复滚动位置不稳定

问题描述

我想通过在 useEffect 中将窗口位置设置回之前的状态来滚动到之前的窗口位置。为了获得之前的状态，我使用了 useRef。

该组件曾经是基于类的，并且在那里完美运行。在我将它重构为钩子之后，这种“不稳定”的行为就开始了。

一开始就宣告useRef权利 

const scrollRef = useRef(window.pageYOffset);

每当组件重新渲染时：

scrollRef.current = window.pageYOffset;

当状态更新时：

useEffect(() => {
  window.scrollTo(0, scrollRef.current)
});

完整代码：

export default () => {
   const scrollRef = useRef(window.pageYOffset);
   ...
   scrollRef.current = window.pageYOffset;
   useEffect(() => {
      window.scrollTo(0, scrollRef.current)
   });

   return (
      ...
   );
}

在状态更新时，我想通过没有这种“不稳定”的行为来改回以前的窗口位置。（摇摇晃晃的意思是看起来他滚动到顶部，然后滚动到上一个位置，所以看起来它在摇晃）

标签： javascriptreactjsreact-hooks

解决方案

如果我理解正确，请使用useLayoutEffect而不是useEffect. 这将在渲染组件之前滚动回顶部。记得添加依赖数组。

推荐阅读