React Hooks：状态总是设置回初始值答案

【问题标题】：React Hooks: State always setting back to initial valueReact Hooks：状态总是设置回初始值
【发布时间】：2019-05-07 21:09:05
【问题描述】：

第一次切换到 react hooks 并使用它们。我的状态似乎总是被设置回我传递它的初始值（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>
  );
}

【问题讨论】：

使用带有钩子的setInterval 不是很直观。请参阅此处的示例：stackoverflow.com/a/53990887/3984987。如需更深入的解释，您可以阅读此overreacted.io/making-setinterval-declarative-with-react-hooks
钩子清理返回函数中需要clearInterval
@DonovanM 很好，我使用了您所附的参考资料来解决这个问题。有趣的东西！我喜欢这个答案，因为它也向我介绍了自定义钩子。如果您输入它作为答案，我会接受。
@GrantKochmann 是的，自定义挂钩非常有用！谢谢，我添加了我之前的评论作为答案。

标签： javascript reactjs react-hooks react-state

【解决方案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");
    };
  }, []);

【讨论】：

【解决方案2】：

使用带有钩子的setInterval 不是很直观。请参阅此处的示例：https://stackoverflow.com/a/53990887/3984987。如需更深入的解释，您可以阅读此https://overreacted.io/making-setinterval-declarative-with-react-hooks。

这个useInterval 自定义钩子也很容易使用https://github.com/donavon/use-interval。（这不是我的 - 我在之前回复后遇到了这个）

【讨论】：