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

【问题标题】：How to prevent a re-render with a functional component and react hooks?如何防止使用功能组件重新渲染并反应钩子？
【发布时间】：2021-06-08 22:08:30
【问题描述】：

问题：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))
})

【问题讨论】：

标签： javascript reactjs react-hooks render

【解决方案1】：

将您的套接字声明更改为

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

应该解决问题。

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

【讨论】：

如果您将其保留在组件内，useRef 是一个更好的选择。

【解决方案2】：

每次状态更改时，都会重新渲染整个组件，包括您的第一行 const socket = io()。尝试像这样将该行移动到组件顶部：

const socket = io()

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

【讨论】：

太棒了。这解决了我的问题。这么简单的事情。
如果这解决了您的问题，请将其标记为正确答案:)