reactjs - 如何在 React App State 中最好地存储 MQTT 消息的复杂对象？

Question

我想用 TypeScript 开发一个 React App，它可以存储和发送 MQTT 数据。
有很多(数百个)MQTT 消息，例如:config.laser.enable == "true" , config.system.value == "23"或 config.user.password == "foobar" .
所以我最终得到一个对象，如:

{
   "config.laser.enable": true,
   "config.system.value": 23,
   "config.user.password": "foobar",
   ...
}

我的每个视觉组件将只使用这些主题的一小部分。
我的第一种方法是为每个组件创建一个 MQTT 客户端并订阅它们各自的主题，但这似乎是很多开销。所以我认为最好只有一个 MQTT 客户端，它订阅所有内容并将消息数据存储在全局状态。
所以我的问题是:我如何(或不应该？)在 React 的全局状态中存储复杂数据(对象)，并确保只有组件在全局状态的特定子集发生变化时才重绘。我可以用 react Redux 为了这？
你能给我一个关于如何做到这一点的例子吗？
我是 React 的新手，所以如果这是微不足道的，请原谅。

Answer 1

React 上下文应该非常适合此类任务。它也是 Redux 库的支柱。
这是 React manual 的摘录:

Context is designed to share data that can be considered “global” for a tree of React components

使用 React 上下文的概念验证示例:

const GlobalMessages = React.createContext({});

function App() {
  return (
    <GlobalMessages.Provider value={/* pass the messages here */}>
      <SomeComponent/>
      <RandomContainer/>
    </GlobalMessages.Provider>;
  )
}

function SomeComponent() {

  // All instances of SomeComponent nested at any level inside
  // GlobalMessages.Provider will now have access to its value.
  let msgContext = useContext(GlobalMessages);

  let message = msgContext.messageTypeA; // Your "selector"

  return <Textbox value={message} />;
}

请注意，在上面的示例中，所有使用 GlobalMessages.Provider 的组件上下文将在其 value 时重新呈现 Prop 更改，这可能会对性能产生一些影响。
幸运的是，由于 virtual DOM，React 组件重新渲染通常非常便宜。 .这意味着大多数渲染根本不会触及真正的 DOM。如果你确定你有一个昂贵的组件想要避免重新渲染 - 你可以 memoize它像这样:

function SomeComponent() {
  let msgContext = useContext(GlobalMessages);
  let message = msgContext.messageTypeA; // Your "selector"

  return useMemo(() => {
    // The rest of your rendering logic
    return <ExpensiveComponent value={message} />;
  }, [message])
}