使用带有依赖项的 useEffect 钩子时，清理功能何时触发？

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 提供的解释很好，但是在谈到重新渲染时（例如，当道具更改时）有一些错误的信息

考虑一些具有以下内容的简单组件

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

说在更改中传递的道具，您可能认为它是这样的

1. '打扫干净'
2. 新道具
3. “渲染……”
4. '应用效果'

但是，实际上会发生以下情况

1. 新道具
2. “渲染……”
3. '打扫干净'
4. '应用效果'

也就是说，清理功能在新的渲染/绘制之后运行，但在应用“新”效果之前，文档可能对此有点含糊不清

在执行下一个效果之前清除上一个效果

这样做是出于性能原因 => 以便渲染不会延迟（有时对我来说也令人沮丧）