React Native如何按时间间隔更新状态 优化高频数据渲染卡顿问题

方案1：自定义节流实现（无第三方依赖） #

核心逻辑是通过ref存储最新的订单簿消息，用定时器控制执行频率，每秒仅处理当前最新的1条数据，自动丢弃中间冗余的旧消息，同时规避普通setTimeout方案常见的闭包陷阱、定时器累积问题。
完整代码示例：

import React, { useRef, useEffect, useCallback } from 'react';

// 组件内部代码
const latestOrderbookMsgRef = useRef(null);
const throttleTimerRef = useRef(null);

const processOrderbook = useCallback(() => {
  if (latestOrderbookMsgRef.current) {
    setOrderbookData(parseOrderbookResponse(latestOrderbookMsgRef.current));
  }
  throttleTimerRef.current = null;
}, []);

useEffect(() => {
  // 收到新消息先更新最新消息缓存
  latestOrderbookMsgRef.current = orderbookLastJsonMessage;

  // 无待执行定时器时，调度1秒后执行数据处理
  if (!throttleTimerRef.current) {
    throttleTimerRef.current = setTimeout(processOrderbook, 1000);
  }

  // 清理逻辑
  return () => {
    if (throttleTimerRef.current) {
      clearTimeout(throttleTimerRef.current);
      throttleTimerRef.current = null;
    }
    setOrderbookData(undefined);
    latestOrderbookMsgRef.current = null;
  };
}, [orderbookLastJsonMessage, processOrderbook]);

方案2：基于lodash throttle实现（项目已引入lodash时推荐） #

直接使用lodash的节流能力，通过参数配置保证仅处理周期内最新的消息：

import { throttle } from 'lodash';
import React, { useEffect, useMemo } from 'react';

// 组件内部代码
const throttledUpdateOrderbook = useMemo(
  () => throttle(
    (msg) => setOrderbookData(parseOrderbookResponse(msg)),
    1000,
    { leading: false, trailing: true }
  ),
  []
);

useEffect(() => {
  if (orderbookLastJsonMessage) {
    throttledUpdateOrderbook(orderbookLastJsonMessage);
  }

  return () => {
    throttledUpdateOrderbook.cancel();
    setOrderbookData(undefined);
  };
}, [orderbookLastJsonMessage, throttledUpdateOrderbook]);

参数说明：

• leading: false：收到第一条消息时不立即执行，等待完整的1秒周期后再处理
• trailing: true：1秒周期结束后执行最后一次收到的消息，保证不会丢失最新数据

额外优化建议 #

• 如果parseOrderbookResponse解析逻辑复杂度较高，可以将该逻辑移到Web Worker中执行，避免阻塞JS主线程导致UI响应延迟
• 订单簿渲染组件用React.memo包裹，同时用useMemo缓存渲染所需的计算数据，减少不必要的重渲染开销

内容的提问来源于stack exchange，提问作者Sthita