如何在 React Native 中渲染快速变化的数据？

Question

我正在构建一个应用程序，显示来自 ROV 的数据。我想在应用程序上显示车辆状态。我正在从网络套接字接收数据，我正在尝试使用

useState

设置该数据。但应用程序在一段时间后崩溃了。

 socket.on("vehicle-state", (data) => {
       setOrientation(data.orientation[2]);
    });

此数据将在我制作的组件中渲染流动站的位置。

<RoverOrientation
     containerStyles="absolute -top-0 mt-5 -left-0 ml-10"
     orientation={orientation}
  />

我尝试使用lodash 和throttle。它可以工作一段时间，一段时间后就崩溃或变得无响应。

Answer 1

不要将方向存储在

useState

中，而是使用

useRef

来存储快速变化的数据，这些数据并不总是需要触发重新渲染。然后您可以更新 ref 值，而不会导致组件每次都重新渲染。

const orientationRef = useRef(0);

useEffect(() => {
  socket.on("vehicle-state", (data) => {
    orientationRef.current = data.orientation[2];
  });
}, []);