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

Question

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

详情: 我正在使用 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());

应该可以解决这个问题。

或者简单地把它移到组件外面

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

How to prevent a re-render with a functional component and react hooks?

javascript

render

reactjs

react-hooks