下面这个 react 的 useeffect 代码中的 return 卸载，清理函数为什么不运行

[gokiller]

在看一本 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 函数里面的代码不会被执行？

[likaci]

组件销毁时会执行, strict 模式下也会执行一次...

[estk]

你实测的结果是怎样的？

[Perry]

https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts

https://react.dev/reference/react/useEffect#my-cleanup-logic-runs-even-though-my-component-didnt-unmount

有问题直接看官网，解释得清清楚楚的

[xling]

你的组件没销毁

[zhw2590582]

useEffect 真是让人疑惑，写久了 react 也会遇到一些意向不大的情况

[leaflxh]

对于初学者写 class 组件或者能更好理解，但是现在已经过时了 ，只推荐用 hook

[gokiller]

@xling 对，知道问题所在了，感谢。