Effect 什么时候需要,依赖与清理怎么写

先理解原理和示例,再练习完整口述与追问。

外部同步;真实响应式依赖;对称 cleanup。

Effect 首次提交后建立同步;依赖变化时通常先清理旧一轮,再建立新一轮;卸载时清理最后一轮。依赖按 Object.is 比较,所以每次新建的对象和函数可能导致重复运行。没有依赖数组、空数组与有依赖数组代表不同同步关系,不能仅用生命周期钩子的名字机械替换。

jsx
useEffect(() => {
  const handle = event => receive(roomId, event)
  socket.on('message', handle)
  return () => socket.off('message', handle)
}, [socket, roomId])

roomId 从 A 变 B,清理的是与 A 对应的旧 handle,然后注册 B 的新 handle。清理函数闭包保留旧值,正好用于撤销旧工作。

不要把整个 async 函数直接作为 Effect 回调返回 Promise;应在内部定义异步函数,并同步返回清理。异常、取消与旧响应覆盖仍需单独处理。

Effect 用来和外部系统同步,例如订阅;派生数据直接算,用户提交放事件。依赖列出所使用的响应式输入,变化时先清理旧同步再建立新同步,卸载也清理。异步请求在回调内部启动,取消或失效旧结果,Effect 本身不要返回 Promise。