在看一本 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 304 天前
组件销毁时会执行, strict 模式下也会执行一次...
|
2
estk 304 天前 via iPhone
你实测的结果是怎样的?
|
3
Perry 304 天前 via iPhone
|
4
xling 304 天前 1
你的组件没销毁
|
5
zhw2590582 304 天前
useEffect 真是让人疑惑,写久了 react 也会遇到一些意向不大的情况
|
6
leaflxh 304 天前
对于初学者写 class 组件或者能更好理解,但是现在已经过时了 ,只推荐用 hook
|