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

Question

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

我看到两个选项：

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

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

选项 1 意味着我正在设置和处理大量 sockets，这是不可取的。

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

Answer 1

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