我正在尝试创建一个加载组件,它将定期向div添加一个句点,每隔1000毫秒使用React中的setInterval。我正在尝试使用文档中描述的方法清理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
但是,loadStatus变量只更新一次,即使组件停止安装,setInterval循环也不会被清除。我是否必须使用类组件进行此操作?
依赖关系是我们暗示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>;
};
在这里阅读更多内容=> a-complete-guide-to-useeffect