React 组件基于其他用户的事件重新渲染

如何解决React 组件基于其他用户的事件重新渲染

我有一个屏幕，用户需要在游戏开始前等待几秒钟。在这个阶段，react 组件需要显示没有使用某个游戏 ID 加入游戏的玩家。新用户加入屏幕时，如何更新老用户的屏幕？如何在其他用户触发事件时呈现组件，并且此更改会反映在所有用户屏幕中。谢谢。

用户 ------ 活动 --------- 反应组件----- 评论

用户 A --> 登录 ---> > 用户 A 从计算机 A 加入

用户 B --> 登录 ---> > 用户 B 从计算 B 加入

用户 C --> 登录 ---> > 使用来自计算机 X 的 C

在这种情况下，c 可以看到所有玩家，而 b 只能看到 a,b 用户，而 a 只能看到他登录。我希望在用户 B 登录时更新用户 A 的反应组件。

解决方法

你可以试试socket.io，或者你可以使用set interval方法t更新每3秒可能会有延迟

,

您没有共享任何代码，因此很难具体说明，但我建议您使用以下父组件和子组件：

• 父组件应该有一个状态来跟踪新加入的用户，这些状态应该作为道具转发给子组件。
• 当新用户加入时，子级应该能够更新父级状态。最后一部分可以通过将箭头函数（它更新父级的状态）作为另一个道具发送给子级来完成。
• 在子组件中，您可以基于此道具（父级的状态）进行渲染。它应该在更新时自动重新渲染。

,

你可以告诉 React 什么时候触发重新渲染，因为当 React 开始渲染组件时，它会运行 shouldComponentUpdate 并查看它是否返回 true（组件应该更新，也就是重新渲染）或false（这次 React 可以跳过重新渲染）。因此，您需要根据需要覆盖 shouldComponentUpdate 以返回 true 或 false，以告诉 React 何时重新渲染以及何时跳过。

另一种方法是使用 State 并在加入的访问者数量发生变化时改变状态，这将自动触发重新渲染。

,

似乎实现这一目标的最佳方法是使用 Web 套接字来确保客户端之间的实时通信。您可以查看 socket.io 库，它使用起来非常简单，因此它至少可以让您知道网络套接字是否确实是您解决此问题所需的解决方案。