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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 84 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

7 条回复 • 2024-02-03 12:34:44 +08:00