从 websockets 更新数据时，如何在不连接到每个子组件的情况下更新单个子组件？

Posted 2023-02-16

【中文标题】从 websockets 更新数据时，如何在不连接到每个子组件的情况下更新单个子组件？

【英文标题】：When updating data from websockets, how can I update individual child components without socketing to every child?

【发布时间】：2021-11-25 15:50:52

【问题描述】：

所以我有一个前端需要每 2 秒更新一次某些数据。目前我已经设置好了，以便我的前端通过 websocket 向我的后端发送 init 消息。收到此消息后，后端开始每隔 2 秒发送一次数据间隔，直到收到 clear 消息以清除该间隔。

我看到两个选项：

我可以在需要每个数据片的层设置一个套接字并将其应用于状态，这样当轮询的数据发生变化时，状态也会发生变化，因此组件也会发生变化。

我可以在顶层设置一个包含所有数据的套接字，并通过 props 将数据向下传递给我的子组件。

选项 1 意味着我要设置和处理大量套接字，这是不可取的。

选项 2 是我的首选选项，但我对如何在保持此应用程序良好运行的同时实现这一点有点未受过教育。如果一切都保持在顶层的状态，我不想每次一条数据更改时都更新整个页面。我可以这样设置，如果data x 发生变化但data y 没有变化，那么只有将data x 传递给其道具的组件会发生变化？

【问题讨论】：

使用redux 并且不要让所有子组件道具都依赖于一个父组件。使用 Redux 存储，您实际上可以集中存储道具，但在必要时更新特定组件。

【参考方案1】：

选项 3。您可以在顶层的上下文提供者中设置一个包含所有数据的套接字，并从上下文消费者订阅每个数据片段。为此，您需要了解contexts。不过，我建议您查看 Redux，因为 useSelector() 可以让您轻松地将数据分割成片，而不会影响应用程序的性能。

【讨论】：

好吧，这看起来很有希望。到目前为止，在我的 React 教育中，上下文是我忽略的东西。如问题中所述，您能否告诉我是否仍然可以使用此技术在特定更新上更新我的各个组件？

是的，上下文避免了您在选项 2 中描述的反模式，即所谓的“道具钻孔”。您将能够将实时事件从包含在应用程序顶部的上下文提供程序状态中的套接字提供给应用程序中可能关心或可能不关心不同数据切片的几个深层嵌套组件，无论这些切片是否重叠。