Javascript 根据其他用户的事件反应组件重新招标

Javascript 根据其他用户的事件反应组件重新招标,javascript,reactjs,react-hooks,event-handling,react-component,Javascript,Reactjs,React Hooks,Event Handling,React Component,我有一个屏幕,用户需要在游戏开始前等待几秒钟。在此阶段,react组件需要显示使用某个游戏id加入游戏的玩家数量。当新用户加入屏幕时,如何更新旧用户的屏幕?如何在其他用户触发事件时呈现组件,此更改将反映在所有用户屏幕中。谢谢 用户------活动------反应组件------注释 用户A-->日志位于-->>用户A从计算机A加入 用户B-->日志在-->>用户B从计算B加入 用户C-->日志在-->>中使用从计算机X获得的C 在这种情况下,c可以看到所有玩家,而b只能看到a、b用户,a只能看到

我有一个屏幕,用户需要在游戏开始前等待几秒钟。在此阶段,react组件需要显示使用某个游戏id加入游戏的玩家数量。当新用户加入屏幕时,如何更新旧用户的屏幕?如何在其他用户触发事件时呈现组件,此更改将反映在所有用户屏幕中。谢谢

用户------活动------反应组件------注释

用户A-->日志位于-->>用户A从计算机A加入

用户B-->日志在-->>用户B从计算B加入

用户C-->日志在-->>中使用从计算机X获得的C


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

您没有共享任何代码,因此很难具体说明,但我建议使用父组件和子组件,如下所示:

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

您可以告诉React何时要触发重新渲染,因为当React要渲染组件时,它将运行
shouldComponentUpdate
,并查看它是否返回true(组件应该更新,也称为重新渲染)或false(React这次可以跳过重新渲染)。因此,您需要根据需要覆盖
shouldComponentUpdate
以返回truefalse,告知React何时重新渲染以及何时跳过


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

您可以尝试socket.io,或者您可以使用set interval method t每3秒更新一次。可能会有延迟,但实现这一点的最佳方法似乎是使用web套接字来确保客户端之间的实时通信。您可以查看该库,它的使用非常简单,因此它至少可以让您知道web套接字是否确实是解决此问题所需的解决方案。

hi reincore,我已经更新了问题,请再次查找。请再次查找问题。我已经更新了。我已经考虑过为特定时间间隔更新时间间隔的选项,但是我正在寻找实时的东西。是否有任何技术或库可以实现这一点?谢谢