React Component 根据其他用户的事件重新渲染答案

【问题标题】：React Component rerendering based on event of other userReact Component 根据其他用户的事件重新渲染
【发布时间】：2021-01-26 10:36:17
【问题描述】：

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

用户 ------ 活动 ------ 反应组件------ cmets

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

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

用户 C --> 登录 ---> > 使用从计算机 X 中加入的 C

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

【问题讨论】：

标签： javascript reactjs react-hooks event-handling react-component

【解决方案1】：

你可以试试socket.io，或者你可以使用设置间隔方法t每3秒更新一次，不过可能会有延迟

【讨论】：

我考虑过针对特定时间间隔更新时间间隔的选项，但我正在寻找实时的东西，有什么技术或库可以实现这个吗？谢谢

【解决方案2】：

您没有共享任何代码，因此很难具体说明，但我建议您有一个父组件和一个子组件，如下所示：

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

【讨论】：

嗨，reincore，我已经更新了问题，请再次查找

【解决方案3】：

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

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

【讨论】：

嗨，请再次找到问题，我已经更新了

【解决方案4】：

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

【讨论】：