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 (
      ...
   );
}

状态更新时：

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 (
      ...
   );
}

完整的代码：

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 (
      ...
   );
}

在状态更新时，我希望通过不出现这种“不稳定”的行为来更改回以前的窗口位置。

---

（我所说的“摇晃”是指，它看起来像是滚动到顶部，然后又滚动到上一个位置，因此它看起来像是在摇晃）

您的问题的解决方案如下所示：

首先创建一个自定义的

usePrevious

hook。这只是另一个函数，它使用new

useRef

方法存储以前的滚动值，并且仅在向其传递新值时更新

//钩子
函数usePrevious（值）{
//ref对象是一个通用容器，其当前属性是可变的。。。
//…并可以保存任何值，类似于类上的实例属性
const ref=useRef（）；
//将当前值存储在ref中
useffect（（）=>{
参考电流=值；
}，[value]）；//仅在值更改时重新运行
//返回以前的值（发生在更新之前，在上面的useEffect中）
返回参考电流；
}

如果我理解正确，请使用

useLayoutEffect

而不是

useffect

。这将在渲染组件之前滚动回顶部。请记住添加依赖项数组。

尝试添加沙盒