为什么这个 return 语句不在我的 codesandbox UseEffect 中执行

Why on earth is not this return statement executed here in my codesandbox UseEffect

我学习 React JavaScript 并且有这个 Sandbox to play around

正如您在 PromiseLoader.js

中所见

useEffect 里面的 return 有一个从不开火的 console.log(.. 为什么? 我以为 JavaScript setInterval 是异步的?

当 React 执行清理时,您 return 来自 useEffect 的函数被调用。

来自https://reactjs.org/docs/hooks-effect.html

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.

查看这个修改后的沙盒以查看其效果:https://codesandbox.io/s/promise-hotpink-loader-forked-xujbl?fontsize=14&hidenavigation=1&theme=dark

单击按钮 show/hide Promise Loader 组件。请注意,当您隐藏组件时,它会卸载,并且 console.log 表明确实正在执行清理功能。