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

Question

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

组件曾经是基于类的，并且在那里工作得很好。在我将它重构为 hooks 之后，这种“摇摇欲坠”的行为开始了。

在开头声明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 (
      ...
   );
}

在状态更新时，我想通过避免这种“摇晃”行为来变回之前的窗口位置。(我所说的摇摇欲坠的意思是看起来他滚动到顶部并紧接着滚动到之前的位置所以它看起来像摇晃)

Answer 1

您的问题的解决方案可能如下所示:

sandbox

首先创建一个自定义的 usePrevious Hook 。这只是另一个函数，它使用新的 useRef 方法来存储以前的滚动值，并且仅在将新值传递给它时更新它。

// Hook
function usePrevious(value) {
  // The ref object is a generic container whose current property is mutable ...
  // ... and can hold any value, similar to an instance property on a class
  const ref = useRef();
  
  // Store current value in ref
  useEffect(() => {
    ref.current = value;
  }, [value]); // Only re-run if value changes
  
  // Return previous value (happens before update in useEffect above)
  return ref.current;
}

在实际组件中，我们声明了一个 previousPosition 变量。每次组件重新渲染时，我们的 customHook 都会在当前位置执行。它返回之前的位置，然后被分配。

此外，对于每个渲染，useEffect 方法都会被执行，因为我们没有将数组作为第二个参数传递。在那里我们只是将当前滚动位置与上一个并滚动回到上一个以防它发生变化。

function Scroll(props){
  const prevPosition = usePrevious(window.pageYOffset);
   // Update scoll position with each update
   useEffect(() => {
     if(window.pageYOffset !== prevPosition){
         window.scrollTo(0, prevPosition);
     }  
   });

   return (
      <div>
      ...
      </div>
   );
}