React+WebSockets应用程序架构问题

Question

有一个服务器发送WebSocket消息。首先，当您连接时，它会发回主题列表：{type: 'INDEX', payload: ['topic-1', 'topic-2', 'topic-3']}。然后，它以不同的间隔为每个主题发送一些数值：{type: 'UPDATE', payload: { topic: 'topic-3', value: 7}}

我的React应用程序使用自定义挂钩接收消息，并决定使用它：

const [topics, setTopics] = useState([])
useWebSocket('ws://localhost:4000', (action) => {
const { type, payload } = action
switch (type) {
case 'INDEX':
setTopics(payload)
break
case 'UPDATE':
console.log('UPDATE', payload)
// ???
break
default:
break
}
})
return (
<ul>
{topics.map(topic => <Topic key={topic} name={topic} value={???} />)}
</ul>
)

我的问题是，如果不重新渲染整个组件，我无法决定如何在每个<Topic />单独发送和更新数值。我需要为每个主题创建某种状态数组吗？

主题组件仅呈现<li>{name}: [{value}]</li>

Answer 1

是的，如果你想传递WebSocket数据，你必须将其存储在一个状态中(或者使用像Zustand这样的外部存储库，这也可以(。

它将重新渲染整个组件，但在大多数情况下，重新渲染是可以的。如果花费的时间太长，则可以对Topic组件进行内存化，然后只有与更新相关的组件才会重新渲染。

此外，您的useWebSocket挂钩是否正在创建websocket连接？如果您需要一个非常可扩展的架构来在上下文提供程序中创建websocket连接，并有一个上下文使用者挂钩(比如useWebSocket(来在该连接上设置侦听器，我建议您这样做。因此，您可以在Topic组件内直接调用useWebsocket，而无需为每个主题创建一个连接。