React Native中如何不重连即可更新Socket.io的事件处理函数

你遇到的报错Cannot read property 'on' of null是因为事件绑定的useEffect执行时，socket还未完成初始化，仍为初始值null；同时你初始化socket的useEffect未传入空依赖数组，会在组件每次重渲染时都执行，导致反复创建socket连接，不符合需求。 #

单组件内使用（仅当前组件需要访问socket） #

直接在组件内初始化一次socket，通过非空判断规避初始化时序问题：

import { useState, useEffect } from 'react';
import io from 'socket.io-client';
import Configs from '你的配置文件路径';

const YourComponent = () => {
  const [socket, setSocket] = useState(null);
  // 示例依赖项
  const [dependency1, setDependency1] = useState('');
  const [dependency2, setDependency2] = useState('');

  // 仅组件挂载时初始化一次socket
  useEffect(() => {
    const newSocket = io(Configs.serverURL);
    setSocket(newSocket);
    // 组件卸载时主动断开连接
    return () => newSocket.disconnect();
  }, []);

  // 事件绑定逻辑，依赖变化时自动更新处理函数
  useEffect(() => {
    // socket未初始化完成时跳过执行
    if (!socket) return;

    // 定义最新的事件处理函数，内部可拿到最新的依赖值
    const handleConnect = () => {
      console.log('连接成功', dependency1, dependency2);
    };
    const handleData = (data) => {
      // 你的业务逻辑
    };

    // 绑定事件
    socket.on('connect', handleConnect);
    socket.on('data', handleData);

    // 依赖更新/组件卸载时解绑旧的事件监听器
    return () => {
      socket.off('connect', handleConnect);
      socket.off('data', handleData);
    };
  }, [socket, dependency1, dependency2]);

  // 主动调用socket方法示例
  const sendMessage = (msg) => {
    socket?.emit('send_msg', msg);
  };

  // 剩余组件逻辑
  return <></>;
};

全局多组件共享（多个组件需要访问socket） #

如果项目多处需要使用socket，建议通过Context全局共享实例，避免重复初始化：

1. 创建Socket上下文 #

// SocketContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import io from 'socket.io-client';
import Configs from '你的配置文件路径';

const SocketContext = createContext(null);

export const SocketProvider = ({ children }) => {
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = io(Configs.serverURL);
    setSocket(newSocket);
    return () => newSocket.disconnect();
  }, []);

  return (
    <SocketContext.Provider value={socket}>
      {children}
    </SocketContext.Provider>
  );
};

// 自定义钩子简化调用
export const useSocket = () => useContext(SocketContext);

2. 入口文件注入上下文 #

// 项目入口文件 如App.js/index.js
import { SocketProvider } from './SocketContext';

const RootApp = () => {
  return (
    <SocketProvider>
      {/* 你的原有根组件 */}
    </SocketProvider>
  );
};

export default RootApp;

3. 任意组件内使用 #

import { useSocket, useEffect } from 'react';

const OtherComponent = () => {
  const socket = useSocket();
  const [yourDependency, setYourDependency] = useState('');

  useEffect(() => {
    if (!socket) return;
    const handleEvent = (data) => {
      console.log(yourDependency, data);
    };
    socket.on('your_event', handleEvent);
    return () => socket.off('your_event', handleEvent);
  }, [socket, yourDependency]);

  return <></>;
};

注意事项 #

• 所有socket.on绑定的事件，必须在useEffect的清理函数中通过socket.off解绑，避免事件重复触发、内存泄漏
• 初始化socket的useEffect必须传入空依赖数组[]，保证仅挂载时初始化一次连接
• 主动调用socket方法时建议用可选链操作符?.规避实例未初始化的问题

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