时间戳

首页 > 解决方案 > 在 mqtt 套接字上接收数据时，我想在 ReactNative 中重新渲染特定组件

reactjs - 在 mqtt 套接字上接收数据时，我想在 ReactNative 中重新渲染特定组件

问题描述

我正在使用 ReactNative 编写一个应用程序，以在接收到 Mqtt 套接字协议上的数据时显示热图图。

我的问题是，当我在 mqtt Socket 上接收数据时，我不知道如何只重新渲染一个特定的 Heatmap 组件。

如果我useState(data)在接收数据时使用，则返回 function { } 很多组件将重新渲染。性能会很差。

function RenderingPage() {

    // if I use this way, a lot of components will be re-rendering 
    // whenever receiving socket data 

    // const [data, setData] = useState('');

    useEffect(() => {
        mqttConnect();
    }, []);

    function mqttConnect() {
        //skip connect process..
        client.on('message', function (topic, data) {
        // it's my data to display. 
        // setData(data)
    }

    return(
    <SafeAreaView>
        ... a lot of components ...

       // I have to pass data to this component for drawing Heatmap
       <HeatMap
         data={data}
      />

    </SafeAreaView>
    )
}

标签： reactjsreact-native

解决方案

我在路上解决了这个问题。我认为这只是一种解决方案。那就是在组件中启动 MqttConnect()。如果我想使用从 MqttConnect 接收的值，我发现我必须使用模块进行状态管理，例如上下文或 Redux..

所以，我把 mqtt 连接函数放到 Heatmap 组件中。

export default function HeatMap() {
  useEffect(() => {
    // when mount, run once.
    let client = mqttConnect();

  return () => {
  //when unmount, quit mqtt.
  client.end();
  };
 });
}

推荐阅读