React Native中如何监听WebSocket消息并更新状态重渲染视图？

我来帮你梳理下类组件中WebSocket消息监听和视图更新的解决方案：

核心思路 #

• 持久化WebSocket实例：别用局部变量存WebSocket，把它挂载到组件实例上，避免被垃圾回收导致后续收不到消息。
• 通过onmessage持续监听：WebSocket的onmessage事件会在每次收到服务器返回时触发，我们就在这个回调里更新组件状态。
• 用setState触发重渲染：只要通过setState更新result，React就会自动重新渲染视图。

修改后的完整代码示例 #

constructor(props) {
  super(props);
  this.state = {
    result: [],
  };
}

componentDidMount() {
  // 将WebSocket实例挂载到组件上，确保生命周期内可访问
  this.ws = new WebSocket('xxx');

  this.ws.onopen = (evt) => {
    console.log("Connection open ...");
    // 这里可以发送初始请求，比如：
    // this.ws.send(JSON.stringify({ action: 'initRequest' }));
  };

  // 监听所有返回的消息
  this.ws.onmessage = (evt) => {
    try {
      // 假设服务器返回JSON格式数据，根据实际情况调整
      const receivedData = JSON.parse(evt.data);
      
      // 用函数式更新state，确保基于最新状态修改
      this.setState(prevState => ({
        // 这里是追加新数据，需要替换的话改成 result: [receivedData]
        result: [...prevState.result, receivedData]
      }));
    } catch (error) {
      console.error('解析WebSocket消息失败:', error);
    }
  };

  // 处理WebSocket错误
  this.ws.onerror = (error) => {
    console.error('WebSocket连接错误:', error);
  };

  // 处理连接关闭（可选：可在此添加重连逻辑）
  this.ws.onclose = (evt) => {
    console.log("WebSocket连接关闭:", evt);
  };
}

// 组件卸载时关闭WebSocket，避免内存泄漏
componentWillUnmount() {
  if (this.ws) {
    this.ws.close();
  }
}

关键细节说明 #

• 函数式更新state：使用prevState => ...的方式是因为setState是异步操作，这样能保证每次更新都基于最新的状态，避免状态覆盖问题。
• 消息格式适配：如果服务器返回的不是JSON格式，直接去掉JSON.parse，使用evt.data原始数据即可。
• 资源清理：在componentWillUnmount中关闭WebSocket，防止组件卸载后仍占用资源。

如果是函数组件场景，思路类似：用useRef存储WebSocket实例，useState管理result状态，useEffect完成初始化和清理操作。

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