React Native Socket.io客户端出现过多待处理回调，应用卡顿求助

核心问题分析 #

1. 直接修改React State：你直接修改了markets数组的元素属性（markets[oldIndex].price = data.price），React的State是不可变的，这种修改不会触发组件正确重渲染，还会导致状态引用混乱，引发大量pending回调。
2. Socket监听未清理：组件卸载后，socket的url事件监听没有移除，持续接收消息并触发回调，积累大量未处理任务，导致卡顿和报错。
3. State更新逻辑错误：setMarkets放在useEffect外层仅执行一次，且未使用函数式更新，无法获取最新的State值，更新逻辑完全失效。
4. 初始State类型错误：markets初始值设为false，后续markets.length判断会报错，应该初始化为空数组[]。
5. 冗余数组遍历：同时使用filter和findIndex遍历数组，浪费性能，可合并为一次遍历。

修复后的代码 #

const [markets, setMarkets] = useState([]); // 修正初始值为数组

useEffect(() => {
  if (!socketConnection) return;

  // 定义消息处理函数
  const handleUrlData = (data) => {
    getData(); // 假设getData是获取初始数据的函数，需确保它不会重复触发不必要请求
    
    // 使用函数式更新获取最新State
    setMarkets(prevMarkets => {
      // 不可变更新：创建新数组，避免修改原State
      return prevMarkets.map(market => {
        if (market.pair !== data.pair) return market;
        
        const newPrice = data.price.toFixed(data.decimalValue);
        const oldPrice = market.price.toFixed(market.decimalValue);
        
        if (newPrice === oldPrice) return market;
        
        // 返回新对象，不修改原对象
        return {
          ...market,
          price: data.price,
          lastPrice: data.lastPrice,
          change: data.change,
          oldPrice: market.price
        };
      });
    });
  };

  // 注册监听
  socketConnection.on("url", handleUrlData);

  // 清理函数：组件卸载时移除监听
  return () => {
    socketConnection.off("url", handleUrlData);
  };
}, [socketConnection]); // 依赖仅为socketConnection

关键优化点说明 #

• 不可变State更新：使用map返回新数组，用扩展运算符...创建新对象，完全避免修改原State引用，确保React能正确检测状态变化并渲染。
• 函数式State更新：setMarkets(prevMarkets => ...)确保每次更新都基于最新的State值，不会因为闭包捕获旧值导致更新失效。
• Socket监听清理：在useEffect的返回函数中调用off移除监听，防止组件卸载后仍接收消息，避免内存泄漏和pending回调积累。
• 减少冗余遍历：合并filter和findIndex的逻辑，在map中直接处理匹配项，提升性能。
• 修正初始State：将初始值设为[]，避免length判断的类型错误。

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