如何通过MobX将RTCPeerConnection状态变更同步至React/React Native组件？

首先得明确：MobX无法直接跟踪RTCPeerConnection这类原生对象的内部属性变化，这不是你的代码问题，而是MobX的工作机制和WebRTC原生对象的特性决定的。

为什么MobX跟踪不了RTCPeerConnection的属性？ #

MobX的可观察性依赖于拦截JavaScript对象的属性访问/修改（比如用Object.defineProperty或ES6 Proxy），但RTCPeerConnection是浏览器/React Native环境提供的原生绑定对象，它的状态属性（比如iceConnectionState、signalingState）并不是普通的JS属性——这些值的更新是由底层WebRTC引擎直接触发的，不会通过JS的setter方法，所以MobX的拦截器根本感知不到这些变化。

哪怕你给peerConnection加上@observable装饰器，MobX也只能跟踪这个变量的引用变化（比如把它换成另一个RTCPeerConnection实例），完全无法感知其内部状态的更新。

更优雅的解决方案：封装事件驱动的可观察状态 #

你目前用事件监听同步状态的思路是对的，但可以优化得更简洁、低冗余——核心是把WebRTC的事件转换成MobX可观察的状态，同时保留RTCPeerConnection作为单一操作实例，避免重复存储整个对象的状态。

优化后的RoomStore实现

import { observable, action } from 'mobx';
import { RTCPeerConnection, RTCMediaStream, RTCConfiguration } from 'react-native-webrtc';

class RoomStore {
  @observable userMediaStream?: RTCMediaStream;
  @observable peerConnection?: RTCPeerConnection;
  
  // 只把需要触发React渲染的状态做成可观察变量
  @observable iceConnectionState: string = 'new';
  @observable signalingState: string = 'stable';
  @observable remoteStreams: RTCMediaStream[] = [];

  @action
  initPeerConnection(config: RTCConfiguration) {
    this.peerConnection = new RTCPeerConnection(config);
    
    // 绑定WebRTC事件，自动同步到MobX可观察状态
    this.peerConnection.oniceconnectionstatechange = () => {
      this.iceConnectionState = this.peerConnection!.iceConnectionState;
    };

    this.peerConnection.onsignalingstatechange = () => {
      this.signalingState = this.peerConnection!.signalingState;
    };

    this.peerConnection.onaddstream = (event) => {
      this.remoteStreams.push(event.stream);
    };

    this.peerConnection.onremovestream = (event) => {
      this.remoteStreams = this.remoteStreams.filter(stream => stream.id !== event.stream.id);
    };
  }

  // 其他WebRTC操作方法（比如创建Offer、添加ICE候选）依然直接操作peerConnection
  @action
  async createOffer() {
    if (!this.peerConnection) return;
    const offer = await this.peerConnection.createOffer();
    await this.peerConnection.setLocalDescription(offer);
    // 这里可以把offer发送给信令服务器...
  }
}

export default RoomStore;

组件中的使用方式

render() {
  const { roomStore } = this.props;
  const { iceConnectionState, remoteStreams } = roomStore;
  
  if (remoteStreams.length > 0 && iceConnectionState === 'completed') {
    return <RemoteVideoStream stream={remoteStreams[0]} />;
  } else {
    return <ConnectingStatusIndicator currentState={iceConnectionState} />;
  }
}

这个方案的优势 #

1. 低冗余：只同步需要触发渲染的状态，RTCPeerConnection本身依然是唯一的操作实例，所有WebRTC逻辑都围绕它展开。
2. 简洁性：状态更新逻辑封装在Store内部，组件只需要观察MobX的可观察变量，不用关心WebRTC的事件细节。
3. 符合MobX最佳实践：用@action包裹状态更新操作，确保批量更新，避免不必要的重复渲染。

有没有可能完全不需要额外的可观察变量？ #

遗憾的是不行——因为WebRTC的状态变化本质是事件驱动的，MobX没有办法直接拦截原生对象的内部状态更新。但上面的方案已经是最接近你需求的简洁实现了：既保留了单一的RTCPeerConnection实例，又用最少的代码实现了状态的可观察性。

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