我正在使用 useEffect 来显示 UI 加载...但仅在 250 毫秒之后。 它有效......但我真的不明白为什么以及特别是如何以及何时 useEffect 调用返回的函数(清除超时)。
嗯……我不确定这是否完美。有时应该出现“正在加载...”消息,但实际上并没有。
const [loadingAfterShortTime, setLoadingAfterShortTime] = useState(false);
useEffect(() => {
setLoadingAfterShortTime(bool => false);
if (myDepandanceToTrigTheLoadingWord === true) {
const id = setTimeout(() => {
setLoadingAfterShortTime(bool => true);
}, 250);
return () => {
clearTimeout(id);
};
}
}, [myDepandanceToTrigTheLoadingWord]);
最佳答案
@Powell Ye 提供的解释很好,但是有一些错误信息,特别是在谈到重新渲染时(例如,当 Prop 改变时)
考虑以下一些简单的组件
useEffect( () => {
console.log('Effect is applied')
//some logic
return () => {
console.log('cleaning up')
//cleanup logic
}
})
return (<>
{console.log('rendering...')}
</>)
假设传递的 props 发生了变化,您可能认为它是这样的
- '清理'
- 新 Prop
- '渲染...'
- '应用效果'
然而,实际发生了以下情况
- 新 Prop
- '渲染...'
- '清理'
- '应用效果'
也就是说,清理函数在之后新的渲染/绘画运行,但是之前应用"new"效果,docs对此可能有点模棱两可
the previous effect is cleaned up before executing the next effect
这样做是出于性能原因 => 这样渲染就不会延迟(有时这对我来说也是令人沮丧的)
关于javascript - 使用带依赖项的 useEffect 钩子(Hook)时,什么时候触发清理功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55148322/