全局的原生webSocket写在什么位置？-灵析社区
雾里1.umi项目中的model是全局的，如果我写在model里：socket.ts，取得的数据用useState保存，那所有用到这个model的组件都会随着useState的更新而更新，不管有没有用到变化的数据。 2.如果我把socket写在ts文件中，import它，要怎么在其它组件中拿到数据。 上面的两点都可以通过事件总线，在收到数据时emit出来，但是看起来这个操作有点多余。
我爱上班用自定义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);
// ...
}