React Hooks：狀態總是設置回初始值

Question

切換到反應掛鈎並首次使用它們。 我的狀態似乎總是被設置回我通過的初始值（0）。 代碼是使頁面自動上下滾動。 該頁面只是顯示各種文件類型的實踐。 發生什么情況是scrollDir變量將切換為1或-1和0。所以控制台將顯示1,0、1,0、1,0、1,0等...如何獲取狀態在更新期間留下來？

function App(props) {

  const [scrollDir, setScrollDir] = useState(0);

  function scrollDown() {
    if(document.documentElement.scrollTop < 10)
    {
      setScrollDir(1);
    }
    else if(document.documentElement.scrollTop >= document.documentElement.scrollHeight - window.innerHeight)
    {
      setScrollDir(-1);
    }

    window.scrollBy(0, scrollDir);
  }

  useEffect(() => {
    setInterval(scrollDown, 100);
  });

  return (
    <StackGrid monitorImagesLoaded={true} columnWidth={"33.33%"} >
      <img src={posterPNG} />
      <img src={posterJPG} />
      <img src={posterGIF} />
      <video src={posterMP4} loop autoPlay muted />
      <Document file={posterPDF}>
        <Page pageNumber={1} />
      </Document>
    </StackGrid>
  );
}

Answer 1

useEffect掛鈎接受第二個參數，即數組。 如果該數組中的某些值發生更改，則useEffect掛鈎將再次運行

如果將該數組留空，則useEfect僅在組件裝入時運行-（基本類似於ComponentDidMount生命周期方法）

而且，如果您省略該數組，則useEffect將在每次組件重新渲染時運行

例如：

當組件掛載時，useEffect僅運行一次：

useEffect(() => {
 //code 
},[]);

每次重新渲染組件時，useEffect都會運行：

useEffect(() => {
 //code 
});

僅當以下某些變量發生更改時，useEffect才會運行：

let a = 1;
let b = 2;
    useEffect(() => {
     //code 
    },[a,b]);

另外，如果在useEffect掛鈎中設置return語句，它必須返回一個函數，並且該函數將始終在useEffect渲染之前運行

  useEffect(() => {
    // code
    return () => {
      console.log("You will se this before useEffect hook render");
    };
  }, []);

Answer 2

將setInterval與鈎子配合使用不是很直觀。 參見此處的示例： https : //stackoverflow.com/a/53990887/3984987 。 有關更深入的說明，您可以閱讀此https://overreacted.io/making-setinterval-declarative-with-react-hooks 。

這個useInterval自定義鈎子也非常易於使用https://github.com/donavon/use-interval 。 （這不是我的-我較早回答后就遇到了這個問題）