React Native中useContext管理socket.io实例，子组件未同步更新问题

你的问题核心在于App组件中的socket是普通变量，不是React状态，直接修改它不会触发组件重渲染，导致SocketProvider的value没有更新，子组件自然无法同步获取新的socket实例。

修复步骤及代码示例 #

1. 用useState管理socket状态（App.js修改）

把App里的普通socket变量换成useState状态，更新时会触发重渲染，Provider的value才会同步更新：

import { useState } from 'react';

// ...其他代码

const App = () => {
  // 用useState初始化socket状态，默认null
  const [socket, setSocket] = useState(null);

  return (
    <>
      {completed && (
        <SocketProvider value={{ socket, setSocket }}>
          <MainContainer />
        </SocketProvider>
      )}
    </>
  );
};

2. 子组件逻辑调整

子组件中useEffect的依赖需要加上socket，避免重复初始化，同时确保socket更新时能感知到：

import { useContext, useEffect } from 'react';
import SocketContext from './SocketContext';
import io from 'socket.io-client';

const ChildComponent = (props) => {
  const { socket, setSocket } = useContext(SocketContext);

  const initSocket = () => {
    const newSocket = io(props.url, { timeout: 10000, reconnection: false });
    setSocket(newSocket);
  };

  useEffect(() => {
    if (!socket) {
      initSocket();
    }
    // 组件卸载时关闭socket连接，避免内存泄漏
    return () => {
      socket?.disconnect();
    };
  }, [socket, props.url]);

  // 监听socket变化，验证同步效果
  useEffect(() => {
    console.log('当前socket实例:', socket);
  }, [socket]);

  return (
    // ...子组件内容
  );
};

原代码失效原因 #

React上下文的更新依赖Provider的value属性变化，你之前只是修改了普通变量socket，没有触发App组件重渲染，Provider的value始终是初始的{socket: null, setSocket: ...}，子组件通过useContext获取的内容不会变化。

用useState管理socket后，调用setSocket会更新状态并触发App组件重渲染，Provider的value随之更新，所有订阅该上下文的子组件都会拿到最新的socket实例。

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