使用Ref管理React与JS对象间回调的方案存疑，求优化思路

以下React组件代码存在闭包陷阱：WebSocket的onclose回调触发时，始终只能获取到status的初始值status_a，即便后续通过用户输入修改了status。

有bug的代码：

function MyComponent() {
  const [status, setStatus] = useState('status_a')
  const [socket, setSocket] = useState()

  useEffect(() => {
    const socket = new WebSocket('ws://foo.com')
    socket.onclose = () => console.log(`socket closed while status was ${status}`)
    setSocket(socket)
  }, [])

  // ... 响应用户输入修改status的相关代码
}

bug原因：useEffect的依赖数组为空，仅在组件挂载时执行一次，此时onclose回调捕获的是初始渲染时的status闭包，后续status更新后，该回调内的status不会同步更新。

我用useRef实现了一个解决方案，但写法较为怪异，尤其当存在多个状态依赖时，为每个状态设置变更处理器来重定义回调会非常繁琐：

function MyComponent() {
  const [status, setStatus] = useState('status_a')
  const [socket, setSocket] = useState()
  const callbacks = useRef({})

  useEffect(() => {
    const socket = new WebSocket('ws://foo.com')
    socket.onclose = () => callbacks.current.socketOnClose()
    setSocket(socket)
  }, [])

  // ... 响应用户输入修改status的相关代码

  // 该方法在每次渲染时重新定义，因此总能获取最新的status值
  callbacks.current.socketOnClose = () => {
    console.log(`socket closed while status was ${status}`)
  }
}

请问有没有更优的实现思路？

方案1：用useRef同步状态的最新值 #

直接将需要在回调中访问的状态存入useRef，每次状态更新时同步更新ref的值，这样回调里可以直接通过ref.current拿到最新状态。

function MyComponent() {
  const [status, setStatus] = useState('status_a')
  const statusRef = useRef(status)
  const socketRef = useRef()

  // 同步状态到ref，确保ref始终持有最新值
  useEffect(() => {
    statusRef.current = status
  }, [status])

  useEffect(() => {
    const socket = new WebSocket('ws://foo.com')
    socket.onclose = () => console.log(`socket closed while status was ${statusRef.current}`)
    socketRef.current = socket

    // 组件卸载时关闭socket，避免内存泄漏
    return () => {
      socket.close()
    }
  }, [])

  // ... 响应用户输入修改status的相关代码
}

优点：逻辑直观清晰，多状态依赖时只需添加对应ref和同步useEffect即可，比原方案更易维护。

方案2：状态变化时动态更新WebSocket回调 #

在状态更新后，直接修改已创建的WebSocket实例的onclose回调，让回调始终捕获最新的状态闭包。

function MyComponent() {
  const [status, setStatus] = useState('status_a')
  const socketRef = useRef()

  useEffect(() => {
    const socket = new WebSocket('ws://foo.com')
    socketRef.current = socket

    return () => {
      socket.close()
    }
  }, [])

  // 状态变化时更新回调，确保回调能拿到最新状态
  useEffect(() => {
    if (socketRef.current) {
      socketRef.current.onclose = () => console.log(`socket closed while status was ${status}`)
    }
  }, [status])

  // ... 响应用户输入修改status的相关代码
}

优点：无需额外存储回调的ref，直接利用状态变化的时机更新WebSocket回调。多状态依赖时，只需把所有依赖状态加入该useEffect的依赖数组即可，扩展性强。

方案3：useCallback+useRef封装回调 #

如果回调逻辑复杂，可先用useCallback包裹回调，再存入ref，写法更符合React Hooks的规范。

function MyComponent() {
  const [status, setStatus] = useState('status_a')
  const socketRef = useRef()

  // 用useCallback包裹回调，依赖变化时重新生成
  const onCloseCallback = useCallback(() => {
    console.log(`socket closed while status was ${status}`)
  }, [status])

  // 同步最新的回调到ref
  const callbackRef = useRef()
  useEffect(() => {
    callbackRef.current = onCloseCallback
  }, [onCloseCallback])

  useEffect(() => {
    const socket = new WebSocket('ws://foo.com')
    socket.onclose = () => callbackRef.current()
    socketRef.current = socket

    return () => {
      socket.close()
    }
  }, [])

  // ... 响应用户输入修改status的相关代码
}

优点：回调逻辑封装更规范，多个回调时可统一管理ref，适合复杂场景。

内容的提问来源于stack exchange，提问作者Lawrence