ReactJS挂钩与全局变量

Question

当不需要更新DOM时，我在理解钩子时遇到了一些困难，在我的情况下，这是一个纯粹基于逻辑的需求，我已经用钩子和全局变量解决了这个问题。此代码表示一个简单的对等视频会议应用程序的组件。在我的例子中，我将从peerJS检索到的调用保存在变量let calls = []中，或者使用钩子let [calls, setCalls] = useState({ calls: [], toClose: [] })，其中toClose是需要关闭的调用。然后我使用Effect钩子来删除基于toClose变量的调用。什么是最佳解决方案，为什么？我是不是遗漏了钩子的一些东西，它们不应该用于这种逻辑需求？

基于挂钩：

...
let [calls, setCalls] = useState({ calls: [], toClose: [] })
useEffect(() => {
console.log(calls)
if (calls.toClose.length != 0) {
setCalls((calls) => {
return {
calls: calls.calls.filter((call) => {
if (calls.toClose.includes(call.peer)) {
call.close()
return false
} else {
return true
}
}),
toClose: []
}
})
}
}, [calls])

peer.on('call', (call) => {
...
setCalls((calls) => { return { calls: [...calls.calls, call], toClose: calls.toClose } })
})

socket.on('user-disconnected', id => {
setCalls((calls) => { return { calls: calls.calls, toClose: [...calls.toClose, id] } })
...
})
socket.on('user-connected', (id) => {
setCalls((calls) => { return { calls: [...calls.calls, call], toClose: calls.toClose } })
})
...

基于全局变量：

let calls = []
function Room(props) {
...
peer.on('call', (call) => {
...
calls.push(call)
})
socket.on('user-disconnected', id => {
calls = calls.filter((call) => {
if (call.peer == id) {
call.close()
console.log('Closed')
return false
} else {
return true
}
})
})
socket.on('user-connected', (id) => {
...
calls.push(call)
})
...
}

Answer 1

感谢@Drew-Reese，我通过使用中间方法解决了我的问题，我保留了反应范围外的变量，但添加了另一个封装我的视频的组件，这将使我在卸载该组件后关闭调用。

import React, { useEffect, useState, useRef } from 'react';
import Video from './Video'
import './CallStream.css';
function CallStream({ call, stream }) {
useEffect(() => {
return () => {
call.close()
}
}, [])
return (
<Video stream={stream}></Video>
);
}
export default CallStream;