在React（Next.js）应用中存储API对象实例的最佳方式是什么？

首选方案：用useRef存储SDK实例 #

useRef的.current属性更新不会触发组件重渲染，完全贴合你不需要因SDK实例变化导致重渲染的需求，而且是React原生的状态管理方式，比挂载到window更规范，不会污染全局作用域。

示例代码：

import { useRef, useEffect } from 'react';

function ChatComponent() {
  const customerSDKRef = useRef(null);

  useEffect(() => {
    // 初始化SDK实例
    const sdk = CustomerSDK.init(config);
    customerSDKRef.current = sdk;

    // 设置连接监听
    const handleConnected = () => {
      console.log('SDK已成功连接');
    };
    sdk.on('connected', handleConnected);

    // 组件卸载时清理监听器（避免内存泄漏）
    return () => {
      sdk.off('connected', handleConnected);
      // 如果SDK提供销毁方法，比如sdk.destroy()，这里可以调用释放资源
    };
  }, []);

  // 发送消息的事件处理函数
  const sendMessage = () => {
    if (customerSDKRef.current) {
      customerSDKRef.current.sendEvent({
        type: 'message',
        text: '你好，我有问题需要咨询'
      });
    }
  };

  return (
    <button onClick={sendMessage}>发送消息</button>
  );
}

你可以在组件的任何地方（比如事件处理、其他useEffect）访问customerSDKRef.current，全程不会触发多余的重渲染。

为什么不推荐useState？ #

• useState的更新会强制触发组件重渲染，但SDK实例的存储完全不需要关联UI更新，这会造成不必要的性能开销。
• 每次调用setCustomerSDK都会让组件重新渲染，哪怕你根本不需要更新页面内容，纯粹是浪费资源。

为什么不推荐window对象？ #

• 直接挂载到window会污染全局作用域，容易和其他第三方库或全局变量产生命名冲突。
• 在Next.js的SSR（服务端渲染）场景下，window对象不存在，初始化时会直接报错（哪怕你只在客户端初始化，全局变量的管理方式也不规范）。
• 组件之间依赖全局变量访问SDK实例，耦合性太高，不利于组件的封装和复用。

额外优化：封装自定义Hook统一管理SDK逻辑 #

如果多个组件需要用到SDK，可以把初始化、监听、方法调用封装成自定义Hook，让代码更模块化、复用性更强：

import { useRef, useEffect, useCallback } from 'react';

export function useLiveChatSDK(config) {
  const sdkRef = useRef(null);

  useEffect(() => {
    const sdk = CustomerSDK.init(config);
    sdkRef.current = sdk;

    // 组件卸载时清理SDK资源
    return () => {
      sdk.destroy?.(); // 如果SDK提供销毁方法，这里调用
    };
  }, [config]);

  // 封装发送消息的方法
  const sendEvent = useCallback((event) => {
    if (sdkRef.current) {
      sdkRef.current.sendEvent(event);
    }
  }, []);

  // 封装添加监听器的方法
  const addListener = useCallback((event, handler) => {
    if (sdkRef.current) {
      sdkRef.current.on(event, handler);
    }
  }, []);

  // 封装移除监听器的方法
  const removeListener = useCallback((event, handler) => {
    if (sdkRef.current) {
      sdkRef.current.off(event, handler);
    }
  }, []);

  return { sendEvent, addListener, removeListener };
}

在组件中使用这个Hook：

function ChatComponent() {
  const { sendEvent, addListener, removeListener } = useLiveChatSDK(yourConfig);

  useEffect(() => {
    const handleConnected = () => {
      console.log('SDK连接成功');
    };
    addListener('connected', handleConnected);

    return () => {
      removeListener('connected', handleConnected);
    };
  }, [addListener, removeListener]);

  return (
    <button onClick={() => sendEvent({ type: 'message', text: '测试消息' })}>
      发送消息
    </button>
  );
}

这样组件只需要关心业务逻辑，SDK的管理逻辑被统一封装，代码更清晰易维护。

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