奇怪的反应 useEffect 和 socketio 行为

Question

当我尝试控制台记录来自套接字的消息时，连接已建立并且一切正常。

import { useState, useEffect } from 'react'
import io from 'socket.io-client'

const App = () => {
    const socketio = io('http://localhost:5000')
    const [time, setTime] = useState("")
    useEffect(() => {
        socketio.on('message', msg => {
            console.log(msg.time)
        })
    }, [])
    return (
        <div className="app">
            {time}
        </div>
    )
 }

当我尝试执行 setTime(msg.time) 而不是 console.log(msg.time) 时，发送了数百个请求，我的浏览器崩溃了。

import { useState, useEffect } from 'react'
import io from 'socket.io-client'

const App = () => {
    const socketio = io('http://localhost:5000')
    const [time, setTime] = useState("")
    useEffect(() => {
        socketio.on('message', msg => {
            setTime(msg.time)
        })
    }, [])
    return (
        <div className="app">
            {time}
        </div>
    )
 }

为什么会发生这种情况，我该如何解决？

Answer 1

io 有副作用。每次调用它时都会创建一个连接。因为你在渲染阶段调用它，每次更新组件的状态时，都会建立一个新的连接。

防止这种情况发生的最简单方法是记住它。

const socketio = React.useMemo(() => io('http://localhost:5000'), [])

或将其移动为组件状态的一部分，并连接到 useEffect。

奇怪的反应 useEffect 和 socketio 行为

Wierd react useEffect and socketio behaviour

reactjs

socket.io