如何使用react-hooks清理 useEffect 中的 setInterval

IT技术 javascript reactjs react-hooks
2021-05-12 13:53:50

我正在尝试创建一个加载组件，该组件将使用 React 中的 setInterval 每隔 1000 毫秒定期向 div 添加一个句点。我正在尝试使用文档中描述的方法清理 setInterval。

https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

import React, { useEffect, useState } from 'react'

const Loading = () => {
    const [loadingStatus, setLoadingStatus] = useState('.')
    const [loop, setLoop] = useState()
    useEffect(() => {
        setLoop(setInterval(() => {
            console.log("loading")
            setLoadingStatus(loadingStatus + ".")
        }, 1000))

        return function cleanup() {
            console.log('cleaning up')
            clearInterval(loop)
        }
    }, [])
    return (<p>
        {`Loading ${loadingStatus}`}
    </p>)
}
export default Loading

然而，loadingStatus 变量只更新一次并且即使在组件停止安装之后 setInterval 循环也不会被清除。我必须使用类组件来做这个吗？

1个回答

依赖是我们对 React 何时应该运行效果的提示，即使我们设置了一个时间间隔并且没有提供任何依赖[]，React 也不会知道我们想要多次运行它，因为我们的空依赖没有真正改变[]。

为了得到想要的结果，我们需要考虑什么时候运行效果？

我们想在loadingStatus变化时运行它，所以我们需要添加loadingStatus作为我们的依赖项，因为我们想在每次loadingStatus变化时运行效果。

我们有2个选择

添加loadingStatus为我们的依赖项。

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState(".");
  const [loop, setLoop] = useState();

  useEffect(
    () => {
      setLoop(
        setInterval(() => {
          console.log("loading");
          setLoadingStatus(loadingStatus + ".");
        }, 1000)
      );

      return function cleanup() {
        console.log("cleaning up");
        clearInterval(loop);
      };
    },
    [loadingStatus]
  );

  return <p>{`Loading ${loadingStatus}`}</p>;
};

让我们的效果不知道我们使用 loadingStatus

const Loading = () => {
  const [loadingStatus, setLoadingStatus] = useState(".");

  useEffect(() => {
    const intervalId = setInterval(() => {
      setLoadingStatus(ls => ls + ".");
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <p>{`Loading ${loadingStatus}`}</p>;
};

在这里阅读更多 =>一个完整的使用指南

其它你可能感兴趣的问题
上一篇React-Intl 如何从变量切换语言环境和消息 下一篇打印时长丝从热床上抬起