![\"\u5c01\u9762\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261022022440-6ad973e83b20b.png\")
<\/p>\n <\/p>\n
\u53bb\u5e74\u6211\u4eec\u4e0a\u7ebf\u4e86\u4e00\u4e2a\u5b9e\u65f6\u76d1\u63a7\u5927\u5c4f，\u7528React+WebSocket\u5b9e\u73b0\u6570\u636e\u52a8\u6001\u66f4\u65b0\u3002\u4e0a\u7ebf\u9996\u65e5\u5c31\u7206\u51fa\u4e25\u91cdbug：\u5f53\u7528\u6237\u5207\u6362\u7b5b\u9009\u6761\u4ef6\u65f6，\u56fe\u8868\u6570\u636e\u5c45\u7136\u9519\u4e71\u663e\u793a\u6210\u4e0a\u4e00\u6b21\u7684\u6761\u4ef6\u7ed3\u679c！\u8fd9\u4e2a\u5e7d\u7075\u822c\u7684"\u6570\u636e\u6ede\u540e"\u95ee\u9898，\u4f60\u4eec\u662f\u4e0d\u662f\u4e5f\u9047\u5230\u8fc7？<\/p>\n
\u95ee\u9898\u590d\u73b0\u573a\u666f：\u5f53\u5feb\u901f\u5207\u6362\u57ce\u5e02\u7b5b\u9009\u5668\u65f6，WebSocket\u8fd4\u56de\u7684\u6700\u65b0\u6570\u636e\u5374\u88ab\u65e7\u7684\u7b5b\u9009\u6761\u4ef6\u5904\u7406\u3002\u5173\u952e\u4ee3\u7801\u5982\u4e0b：<\/p>\n
function Dashboard() {
\n const [city, setCity] = useState('beijing');
\n useEffect(() => {
\n const ws = new WebSocket(API_URL);
\n ws.onmessage = (e) => {
\n \/\/ \u274c \u8fd9\u91cc\u6c38\u8fdc\u62ff\u5230\u7684\u662f\u521d\u59cb\u7684city\u503c
\n processData(e.data, city);
\n };
\n return () => ws.close();
\n }, []); \/\/ \u7a7a\u4f9d\u8d56\u6570\u7ec4
\n return <CitySelector onChange={setCity} \/>;
\n}<\/p>\n
\u4f60\u53ef\u80fd\u4f1a\u95ee：\u660e\u660e\u7528setCity\u66f4\u65b0\u4e86\u72b6\u6001，\u4e3a\u4ec0\u4e48WebSocket\u56de\u8c03\u91cc\u8fd8\u662f\u65e7\u503c？\u8fd9\u91cc\u5c31\u8e29\u4e2d\u4e86React\u95ed\u5305\u9677\u9631\u7684\u7ecf\u5178\u6848\u4f8b\u3002<\/p>\n
\u5173\u952e\u5728\u4e8euseEffect\u7684\u4f9d\u8d56\u6570\u7ec4\u4e3a\u7a7a\u65f6，\u5176\u56de\u8c03\u4f1a\u6355\u83b7\u521d\u59cb\u5316\u65f6\u7684\u95ed\u5305\u3002\u65e0\u8bba\u540e\u7eedstate\u5982\u4f55\u66f4\u65b0，ws.onmessage\u5f15\u7528\u7684\u59cb\u7ec8\u662fmount\u65f6\u7684city\u503c\u3002\u8fd9\u4e0d\u662fReact\u7684bug，\u800c\u662fJavaScript\u95ed\u5305\u7684\u5de5\u4f5c\u673a\u5236：<\/p>\n
useEffect(() => {
\n const ws = new WebSocket(API_URL);
\n ws.onmessage = (e) => processData(e.data, city);
\n return () => ws.close();
\n}, [city]); \/\/ \u2705 city\u53d8\u5316\u65f6\u91cd\u5efaWebSocket<\/p>\n
function Dashboard() {
\n const [city, setCity] = useState('beijing');
\n const latestCity = useRef(city);
\n useEffect(() => {
\n latestCity.current = city; \/\/ \u6bcf\u6b21\u6e32\u67d3\u66f4\u65b0ref
\n }, [city]);
\n useEffect(() => {
\n const ws = new WebSocket(API_URL);
\n ws.onmessage = (e) => {
\n processData(e.data, latestCity.current); \/\/ \u2705 \u6c38\u8fdc\u62ff\u5230\u6700\u65b0\u503c
\n };
\n return () => ws.close();
\n }, []);
\n}<\/p>\n
ws.onmessage = (e) => {
\n setData(prev => processData(e.data, prev)); \/\/ \u2705 \u7528\u51fd\u6570\u5f0f\u66f4\u65b0\u89c4\u907f\u95ed\u5305
\n};<\/p>\n
\u6211\u4eec\u5728\u6d4b\u8bd5\u73af\u5883\u6a21\u62df\u4e86\u9ad8\u9891\u66f4\u65b0\u573a\u666f（\u6bcf\u79d210\u6b21state\u53d8\u5316）：<\/p>\n
| \u4f9d\u8d56\u9879\u89e6\u53d1re-run<\/td>\n | \u8f83\u4f4e<\/td>\n | 120ms<\/td>\n | 300+<\/td>\n<\/tr>\n |
| useRef\u65b9\u6848<\/td>\n | \u8f83\u9ad8<\/td>\n | 15ms<\/td>\n | 1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\u907f\u5751\u6307\u5357：useEffect\u7684\u6b7b\u4ea1\u9677\u9631<\/h3>\n\u7a7a\u4f9d\u8d56\u6570\u7ec4\u9677\u9631：\u4efb\u4f55\u4f9d\u8d56state\/props\u5374\u4e0d\u58f0\u660e\u4f9d\u8d56\u7684\u884c\u4e3a\u90fd\u53ef\u80fd\u5bfc\u81f4\u95ed\u5305\u95ee\u9898<\/p>\n
|