Question

问题：Web 应用程序使用输入的 onChange 事件重新渲染，从而导致套接字断开连接然后重新连接。

详细信息：我正在使用 Socket.io、React、Express、PostgreSql 和 Nodejs 创建一个小型多人游戏。我希望用户能够使用输入框和提交按钮搜索房间名称或使用按钮创建游戏。

问题：当用户在输入框中输入房间代码时，有没有办法防止重新渲染？

代码：

App.js

const App = () => {
    const socket = io();
    const [roomCode, setRoomCode] = useState('');

        // CREATE ROOM CODE
    const createRoom = () => {
        socket.emit('create', true)
        socket.once('roomCreated', room => {
            axios.post(`/room/roomCode?room=${room}`)
                .then(({ data }) => {
                    console.log(data);
                })
                .catch(err => console.warn(err))
        })
    }

        // JOIN SPECIFIC ROOM
    const joinRoom = () => {
        axios.post(`/room/findRoom?roomCode=${roomCode}`)
            .then(({ response }) => {
                console.info(response)
            })
            .catch(err => console.warn(err))
    }

    return (
        <div>
            <button
                onClick={createRoom}
            >
                Create
            </button>
            <input
                placeholder="Room Code"
                onChange={(e) => { setRoomCode(e.target.value) }}
            />
            <button onClick={joinRoom}>
                Enter Room Code
            </button>
        </div>
    )
}

Room.js 路由

roomRouter.post('/findRoom', (req, res) => {
    const { roomCode } = req.query
    Room.findOne({
        where: {
            room_code: roomCode,
        }
    })
        .then(room => {
            room ? res.send(room) : res.send('room does not exist')
        })
        .catch(err => console.warn(err))
})

Answer 1

每次状态更改时，都会重新渲染整个组件，包括您的第一行 const socket = io()。尝试将那条线移动到组件顶部，如下所示：

const socket = io()

const App = () => {
  // ...
}

Answer 2

将您的套接字声明更改为

 const [socket] = useState(io());

应该解决问题。

或者简单的把它移到组件外

如何防止使用功能组件重新渲染并响应钩子？

2 个答案: