React Native微秒级高频更新状态阻塞交互如何解决？

问题核心原因 #

currency.com的行情WebSocket推送频率通常可达每秒数十次甚至上百次，每次推送直接触发setState会持续占用JS线程执行重渲染逻辑，持续高频的setState会让JS线程的事件循环一直处于重渲染任务的执行状态，点击、导航手势等交互事件被压在任务队列末尾无法及时调度，最终导致应用无响应。
#

可行落地方案 #

• 帧级节流更新，一帧最多渲染一次
  人眼最多感知60fps（约每16ms一帧）的视觉变化，高于这个频率的更新完全是无效性能消耗。不要在socket消息回调里直接调用setState，先用ref缓存最新推送数据，通过requestAnimationFrame对齐屏幕刷新节奏调度更新，保证一帧内最多执行一次state更新，多余的推送直接覆盖缓存即可，不会丢失最新数据。
  示例代码：

  import { useRef, useEffect, useState, useCallback } from 'react';
  import MarketList from './MarketList';
  
  export default function MarketPage() {
    const [marketData, setMarketData] = useState({});
    // 缓存最新socket数据，修改ref不会触发重渲染
    const latestDataCache = useRef({});
    // 标记是否已有待执行的更新任务，避免重复调度
    const hasPendingUpdate = useRef(false);
  
    const runViewUpdate = useCallback(() => {
      if (hasPendingUpdate.current) return;
      hasPendingUpdate.current = true;
      requestAnimationFrame(() => {
        // 取缓存里的最新数据一次性更新
        setMarketData(prev => ({...prev, ...latestDataCache.current}));
        hasPendingUpdate.current = false;
      });
    }, []);
  
    useEffect(() => {
      const ws = new WebSocket('wss://api.currency.com/ws');
      ws.onmessage = (evt) => {
        const newQuote = JSON.parse(evt.data);
        // 只更新缓存，不直接触发重渲染
        latestDataCache.current[newQuote.symbol] = newQuote;
        runViewUpdate();
      };
      return () => ws.close();
    }, [runViewUpdate]);
  
    return <MarketList data={marketData} />
  }
  

  对实时性要求不高的行情列表，甚至可以把更新节流到每100ms一次（10fps），人眼几乎感知不到延迟，性能压力会降低80%以上，是改造成本最低、见效最快的方案。

• 拆分渲染粒度，避免全组件树重渲染
  不要把所有行情数据存在单个顶层state里一次性更新：

  1. 把单个交易对行情、单个指标模块拆成独立组件，用React.memo包裹，仅当组件自身依赖的数据变化时才重渲染
  2. 复杂场景可以配合状态管理库的按需订阅能力（比如Zustand的selector、Redux的useSelector），让每个子组件只订阅自己需要的字段，无关数据推送不会触发组件重渲染
  3. 避免在渲染函数里写内联对象、内联函数作为props传递给子组件，否则memo缓存会失效，仍然会触发全量重渲染

• 非核心数据批量合并更新
  如果单次socket推送只修改价格、涨跌幅这类单个字段，不要每个字段变动都触发一次setState：React 18+版本会自动把同一轮事件循环里的多次state改动批处理为一次重渲染；如果是React 17及以下的RN版本，可以手动引入react-native/Libraries/Renderer/shims/ReactNative里的unstable_batchedUpdates包裹更新逻辑，合并多次setState减少重渲染次数。

• 重交互场景用UI线程渲染绕过JS线程阻塞
  如果是做盘口、实时K线这类高频更新的复杂组件，可以搭配react-native-reanimated、react-native-skia这类支持UI线程渲染的库：把行情数据存在Reanimated的SharedValue里，直接在UI线程驱动视图更新，不需要走JS线程和RN桥通信，哪怕每秒更新上百次也不会占用JS线程资源，点击、导航等交互完全不会被阻塞。

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