React中从API获取配置创建MQTT客户端的正确实现方案

需求说明 #

• 通过react-query从API获取MQTT连接配置
• 配置就绪后创建MQTT客户端
• 客户端实例存入状态供组件使用
• 配置变更时自动更新客户端并断开旧连接
• 组件卸载时断开MQTT连接

两次尝试的问题分析 #

第一次尝试 #

import mqtt from "mqtt"

export function useMqttClient() {
  const [client, setClient] = useState();

  const { data: config } = useQuery(/* ... */);
  
  useEffect(() => {
    if(config && !client) {
      setClient(mqtt.connect(config))
    }
  }, [config, client])
  
  // ...
}

问题：

• 组件卸载时未执行client.end()，旧连接残留，用户返回页面时MQTT.js会自动重连，引发重复连接问题
• 配置变更时无法更新客户端，逻辑仅在client为null时创建新实例，无法响应配置变化

第二次尝试 #

import mqtt from "mqtt"

export function useMqttClient() {
  const [client, setClient] = useState();

  const { data: config } = useQuery(/* ... */);
  
  useEffect(() => {
    if(config && !client?.connected) {
      setClient(mqtt.connect(config))
    }
    return () => client?.end()
  }, [config, client])
  
  // ...
}

问题：

• client是类实例，每次setClient都会生成新引用；加上config是对象（API返回可能每次都是新对象），导致useEffect无限循环执行，不断创建和销毁客户端

正确实现方案 #

核心思路是用useRef持有客户端实例，避免将其放入useEffect依赖数组，同时确保配置变更时正确清理旧连接并创建新客户端：

import { useState, useEffect, useRef, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import mqtt from 'mqtt';

export function useMqttClient() {
  const [client, setClient] = useState(null);
  const clientRef = useRef(null);
  const { data: config, isLoading } = useQuery({
    queryKey: ['mqtt-config'],
    queryFn: () => fetch('/api/mqtt-config').then(res => res.json()),
    // 可选：配置变更时保留旧数据直到新数据就绪，避免客户端频繁销毁重建
    // keepPreviousData: true,
  });

  // 生成配置的唯一标识，避免因对象引用变化触发不必要的更新
  const configSignature = useMemo(() => {
    return config ? JSON.stringify(config) : '';
  }, [config]);

  useEffect(() => {
    if (!config) return;

    // 清理旧客户端连接
    if (clientRef.current) {
      clientRef.current.end(true); // true强制断开，阻止自动重连
      clientRef.current = null;
      setClient(null);
    }

    // 创建新客户端
    const newClient = mqtt.connect(config);
    clientRef.current = newClient;
    setClient(newClient);

    // 组件卸载或配置变更时执行清理
    return () => {
      if (clientRef.current) {
        clientRef.current.end(true);
        clientRef.current = null;
        setClient(null);
      }
    };
  }, [configSignature]); // 仅依赖配置的内容签名，而非对象引用

  return { client, isLoading };
}

关键细节说明 #

1. useRef持有客户端：避免将client状态放入useEffect依赖，防止状态更新触发无限循环
2. 配置签名：用JSON.stringify生成配置的唯一字符串标识，确保只有配置内容真正变化时才触发客户端更新，解决API返回新对象引用导致的不必要重连
3. 强制断开连接：调用client.end(true)时传入true，强制关闭连接并阻止MQTT.js自动重连，避免残留连接
4. 清理时机：在创建新客户端前先清理旧连接，同时在useEffect的清理函数中处理组件卸载的情况

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