如何在React(Next.js)的WebSocket onmessage回调中获取最新state值

核心原因是React函数组件的闭包陷阱：useEffect回调中定义的onmessage函数捕获了当前渲染周期的selectedId状态快照，后续selectedId更新后，旧的回调函数依然引用的是当初捕获的旧值。不需要重连WebSocket即可解决，以下是3种常用可行方案：

方案1：用useRef同步最新状态（最推荐，实现成本最低） #

useRef的current属性是可变的，所有引用都指向同一块内存地址，闭包只要拿到ref的引用，每次读取current就能拿到最新的状态值，完全不需要修改WebSocket连接逻辑。

const [selectedId, setSelectedId] = useState(null)
// 新增ref用来同步最新的selectedId
const latestSelectedId = useRef(selectedId)
const ws = useRef()

// selectedId更新时同步到ref
useEffect(() => {
  latestSelectedId.current = selectedId
}, [selectedId])

// WebSocket连接仅初始化一次，不需要加selectedId依赖
useEffect(() => {
  ws.current = new WebSocket(/* 连接地址 */)

  ws.current.onopen = () => {/* 连接成功逻辑 */}

  ws.current.onmessage = event => {
    // 读取ref.current即可拿到最新状态
    console.log(latestSelectedId.current)
  }

  // 组件卸载时关闭连接避免泄漏
  return () => {
    ws.current?.close()
  }
}, [])

方案2：仅更新onmessage回调（无需重建连接） #

不需要每次状态变化都重建WebSocket，只需要在状态变化后，给已有的WebSocket实例重新赋值最新的onmessage回调即可。

const [selectedId, setSelectedId] = useState(null)
const ws = useRef()

// 消息处理回调，依赖最新的selectedId
const handleMessage = useCallback((event) => {
  console.log(selectedId)
}, [selectedId])

// 连接仅初始化一次
useEffect(() => {
  ws.current = new WebSocket(/* 连接地址 */)
  ws.current.onopen = () => {/* 连接成功逻辑 */}

  return () => {
    ws.current?.close()
  }
}, [])

// handleMessage更新时，重新赋值给ws实例的onmessage
useEffect(() => {
  if (ws.current) {
    ws.current.onmessage = handleMessage
  }
}, [handleMessage])

方案3：使用React18+的useEvent（官方原生方案） #

React18新增的useEventHook可以包装回调函数，保证回调内部永远能访问到最新的状态与props，同时回调本身的引用永远不会变化，不需要添加到依赖数组中。

import { useEvent, useState, useRef, useEffect } from 'react'

const [selectedId, setSelectedId] = useState(null)
const ws = useRef()

// 用useEvent包裹消息处理逻辑
const handleMessage = useEvent((event) => {
  console.log(selectedId)
})

useEffect(() => {
  ws.current = new WebSocket(/* 连接地址 */)
  ws.current.onopen = () => {/* 连接成功逻辑 */}
  ws.current.onmessage = handleMessage

  return () => {
    ws.current?.close()
  }
}, [])

注意 #

你当前的原始代码存在连接泄漏问题：useEffect依赖selectedId，每次selectedId变化都会新建一个WebSocket连接，旧的连接没有手动销毁，会导致后端连接溢出、前端收到重复消息等问题。

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