下面这个 react 的 useeffect 代码中的 return 卸载，清理函数为什么不运行
gokiller · 2024-02-03 03:35:09 +08:00 · 1879 次点击这是一个创建于 365 天前的主题，其中的信息可能已经有所发展或是发生改变。
在看一本 react 书时，它是这么写的。
function App1(){
const handleWindowsResize=()=>{
console.log('windows size change')
}
useEffect(()=>{
console.log('called')
const timerObj = setInterval(()=>{
console.log('每秒+1')
},1000)
window.addEventListener('resize',handleWindowsResize)
return ()=>{
console.log('clear')
clearInterval(timerObj)
window.removeEventListener('resize',handleWindowsResize)
}
},[])
return (
<div>
Hello world
</div>
)
}
console 里面会定时输出 windows size change ，而不会进入到 useEffect 里面清除定时器。 根据对书中理解，return 函数是在第二次执行 useEffect 之前执行的？ 而上面的 useEffect 只会执行一次，是不是意味者 return 函数里面的代码不会被执行？
 |
1
likaci 2024-02-03 04:29:50 +08:00
组件销毁时会执行, strict 模式下也会执行一次...
|
 |
2
estk 2024-02-03 08:26:22 +08:00 via iPhone
你实测的结果是怎样的？
|
 |
3
Perry 2024-02-03 08:39:01 +08:00 via iPhone
|
 |
4
xling 2024-02-03 08:58:13 +08:00  1
你的组件没销毁
|
 |
5
zhw2590582 2024-02-03 11:44:10 +08:00
useEffect 真是让人疑惑，写久了 react 也会遇到一些意向不大的情况
|
 |
6
leaflxh 2024-02-03 11:57:16 +08:00
对于初学者写 class 组件或者能更好理解，但是现在已经过时了 ，只推荐用 hook
|
Select Language