用自定义Hook: // useWebSocket.js import { useState, useEffect } from 'react'; function useWebSocket(url) { const [data, setData] = useState(null); const [socket, setSocket] = useState(null); useEffect(() => { const ws = new WebSocket(url); setSocket(ws); ws.onmessage = (event) => { setData(JSON.parse(event.data)); }; return () => { ws.close(); }; }, [url]); return { data, socket }; } export default useWebSocket; 在你的组件里用Hook: import useWebSocket from './useWebSocket'; function MyComponent() { const { data, socket } = useWebSocket('ws://example.com/socket'); // ... } 或者用Context API: // WebSocketContext.js import React, { useState, useEffect, createContext } from 'react'; export const WebSocketContext = createContext(); export function WebSocketProvider({ children }) { const [data, setData] = useState(null); const [socket, setSocket] = useState(null); useEffect(() => { const ws = new WebSocket('ws://example.com/socket'); setSocket(ws); ws.onmessage = (event) => { setData(JSON.parse(event.data)); }; return () => { ws.close(); }; }, []); return ( {children} ); } 然后在你的组件里: import React, { useContext } from 'react'; import { WebSocketContext } from './WebSocketContext'; function MyComponent() { const { data, socket } = useContext(WebSocketContext); // ... }