使用WebRTC时peer connection、media stream应存useState还是Redux？

RTCPeerConnection、MediaStream这类WebRTC原生实例，既不适合存到普通useState里，更不能存到Redux中。

为什么不推荐这两种存储方式 #

• 首先说Redux：Redux的核心设计约定就是存储的所有状态必须可序列化，才能支持时间旅行调试、状态快照、持久化等能力。WebRTC实例是带内部状态、绑定了大量事件监听、持有原生资源引用的复杂类对象，完全不可序列化，强行塞到Redux里会直接导致DevTools失效、状态更新异常、内存泄漏等问题，完全违背Redux的设计原则。
• 再说说普通useState：useState存储的状态会参与React的重渲染比对，只要调用setter传入新引用就会触发组件重渲染。但WebRTC实例本身不需要驱动UI重渲染，它的状态变化是靠自身的事件回调对外抛出的；如果把实例存在useState里，很容易因为误操作传入新的实例引用，导致之前绑定的事件监听、协商完成的连接状态全部丢失，轻则音视频断流，重则整个连接直接报废。

正确的存储方式 #

• 如果实例只在单个组件内使用，直接用useRef存储即可。useRef的.current属性挂载的值不会参与React的重渲染流程，引用全程稳定，不会因为组件重渲染被重置，完全适配WebRTC实例的生命周期需求，示例代码如下：

const pcRef = useRef(null);
const localStreamRef = useRef(null);

useEffect(() => {
  // 初始化连接
  pcRef.current = new RTCPeerConnection(rtcConfig);
  const initStream = async () => {
    localStreamRef.current = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true
    });
    // 绑定事件、做SDP协商等逻辑都可以在这里处理
  };
  initStream();

  return () => {
    // 组件卸载时必须清理资源，避免内存泄漏
    pcRef.current?.close();
    localStreamRef.current?.getTracks().forEach(track => track.stop());
  };
}, []);

• 如果需要跨多个组件共享这些WebRTC实例，不要往Redux里塞，可以基于React Context配合useRef做轻量的全局共享，本质是保证这些非序列化实例的引用稳定，不参与常规可序列化状态的更新流程。

补充：只有WebRTC逻辑派生出的、需要驱动UI更新的可序列化普通值，才适合存入useState或Redux，比如当前连接状态（连接中/已连接/已断开）、麦克风/摄像头开关状态、通话时长这类字符串、布尔、数字类型的值。

内容的提问来源于stack exchange，提问作者Phan Văn Bình