javascript - 使用带依赖项的 useEffect 钩子(Hook)时，什么时候触发清理功能？

Question

我正在使用 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]);

Answer 1

@Powell Ye 提供的解释很好，但是有一些错误信息，特别是在谈到重新渲染时(例如，当 Prop 改变时)

考虑以下一些简单的组件

    useEffect( () => {
        console.log('Effect is applied')
        //some logic
        return () => {
            console.log('cleaning up')
            //cleanup logic
        }
    })
    return (<>
        {console.log('rendering...')}
     </>)

假设传递的 props 发生了变化，您可能认为它是这样的

1. '清理'
2. 新 Prop
3. '渲染...'
4. '应用效果'

然而，实际发生了以下情况

1. 新 Prop
2. '渲染...'
3. '清理'
4. '应用效果'

也就是说，清理函数在之后新的渲染/绘画运行，但是之前应用"new"效果，docs对此可能有点模棱两可

the previous effect is cleaned up before executing the next effect

这样做是出于性能原因 => 这样渲染就不会延迟(有时这对我来说也是令人沮丧的)