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

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());

应该解决这个问题。

或者简单地将其移出组件