我想用 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 的新手,所以如果这是微不足道的,请原谅。
最佳答案
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])
}
关于reactjs - 如何在 React App State 中最好地存储 MQTT 消息的复杂对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67319972/