useEffect 用来让组件和外部系统同步,例如订阅事件或启动定时器。它不适合替代所有状态计算;能在渲染时直接得到的值,通常不需要再放进 effect。

依赖项说明同步关系

依赖数组列出 effect 使用到、并且可能变化的响应式值。依赖变化后,React 会先运行上一次的清理函数,再运行新的 effect。

清理外部资源

TSX
useEffect(() => {
  const timer = window.setInterval(refresh, 5000)
  return () => window.clearInterval(timer)
}, [refresh])

组件卸载或依赖变化时,清理函数会释放定时器。订阅事件、WebSocket 连接也应遵循同样的清理思路。

排查依赖问题

遇到重复请求或旧数据时,先检查 effect 真正依赖哪些值,再考虑是否能把逻辑移到事件处理函数或使用更合适的数据请求方式。