NextJS中如何将已定义的Websocket或Peer实例传递给其他元素

你遇到的两个问题本质原因：

1. useEffect 闭包会捕获当前渲染周期的状态快照，所以如果直接把实例存在 React State 中，后续在 useEffect 内部访问时拿到的永远是初始化时的旧值
2. 实例仅定义在 useEffect 内部的普通变量中，组件重渲染后变量会被销毁，无法对外传递

解决方案：结合 useRef + useState 处理 #

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

function ParentComponent() {
  // 用 useRef 存储可变实例，不受闭包影响，任意时刻访问 current 都是最新值
  const peerRef = useRef(null)
  // 用 useState 触发重渲染，确保实例更新后子组件能通过 props 拿到最新值
  const [peerInstance, setPeerInstance] = useState(null)

  useEffect(() => {
    // 避免重复初始化（适配 React StrictMode 两次执行 useEffect 的特性）
    if (peerRef.current) return

    // 初始化实例
    const newPeer = new RTCPeerConnection()
    newPeer.dcm = newPeer.createDataChannel("channel")

    // 存入 ref，供后续 useEffect 内部逻辑调用
    peerRef.current = newPeer
    // 更新 state 触发重渲染，对外传递实例
    setPeerInstance(newPeer)

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      if (peerRef.current) {
        peerRef.current.close()
        peerRef.current = null
      }
    }
  }, [])

  // 实例初始化完成后再传递给子组件，避免子组件拿到空值
  return (
    <div>
      {peerInstance && <ChildComponent peer={peerInstance} />}
    </div>
  )
}

注意事项 #

• 如果是 WebSocket 实例，逻辑完全一致，仅需替换实例初始化代码即可
• 不要直接将 ref 作为 props 传递给子组件：ref 更新不会触发组件重渲染，子组件无法感知到实例的变化
• 如果实例初始化需要依赖动态参数（如 WebSocket 连接地址），请将参数加入 useEffect 依赖数组，参数变化时主动销毁旧实例再创建新实例
• 子组件拿到实例后建议仅做事件监听、调用方法操作，不要直接修改实例上的属性，避免逻辑混乱

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