React通过WebSocket接收单条消息设置多状态导致浏览器卡顿/卡死的原因是什么

核心致命问题：事件绑定死循环 #

你在Watchlist.js中绑定ws.onmessage事件的useEffect，错误将price和dailystats加入了依赖数组：

• 每次WebSocket收到消息都会调用setprice、setdailystats更新这两个状态
• 状态更新会触发该useEffect重新执行，重新绑定一次onmessage事件
• 重复绑定的事件会叠加触发，收到1条消息会执行N次更新逻辑，N随运行时间指数级上涨，直接导致浏览器卡死

其他影响性能的问题 #

• dailystats初始值错误：初始设为了空字符串''，后续实际存储的是对象，运算时可能触发隐式类型转换报错，增加不必要的性能开销
• 缺少WebSocket清理逻辑：组件卸载、用户取消订阅时没有主动关闭WebSocket连接、清除事件监听，造成内存泄漏
• 状态更新频率过高：Coinbase的ticker频道每秒会推送数十条更新，每次更新都全量复制价格对象、触发全表格重绘，币对数量较多时渲染压力极大
• usePrevious钩子不严谨：内部useEffect没有加依赖项，每次组件渲染都会执行赋值逻辑，增加无效运行开销

1. 修复onmessage绑定的useEffect依赖
   因为你用了状态的函数式更新（setprice(prev => ...)），本身不需要依赖外部的price和dailystats，直接把依赖数组改为空数组即可，避免重复绑定事件
2. 修正dailystats初始值为{}
3. 添加清理逻辑：在useEffect的返回函数中关闭WebSocket连接、清空事件监听
4. 增加更新节流：批量收集100~200ms内的所有价格更新，合并后一次性触发状态修改，大幅减少重绘次数
5. 可选优化：如果币对数量超过50个，建议添加虚拟滚动，只渲染可视区域内的行，避免一次性渲染上百个DOM节点

核心代码修改示例 #

Watchlist.js 修复后部分代码 #

// 提前声明定时器和待更新数据ref
const updateTimer = useRef(null);
const pendingUpdates = useRef({ price: {}, dailystats: {} });
// 修正初始值
const [dailystats, setdailystats] = useState({});

useEffect(() => {
  ws.current.onmessage = (e) => {
    if (!first.current) return;
    const data = JSON.parse(e.data);
    if (data.type !== "ticker") return;

    // 先收集更新，不立刻触发状态修改
    pendingUpdates.current.price[data.product_id] = parseFloat(data.price).toFixed(3);
    pendingUpdates.current.dailystats[data.product_id] = parseFloat(data.open_24h).toFixed(3);

    // 节流：150ms批量更新一次
    if (!updateTimer.current) {
      updateTimer.current = setTimeout(() => {
        setprice(prev => ({ ...prev, ...pendingUpdates.current.price }));
        setdailystats(prev => ({ ...prev, ...pendingUpdates.current.dailystats }));
        pendingUpdates.current = { price: {}, dailystats: {} };
        updateTimer.current = null;
      }, 150);
    }
  };

  // 清理逻辑
  return () => {
    if (updateTimer.current) clearTimeout(updateTimer.current);
    if (ws.current) {
      ws.current.close();
      ws.current = null;
    }
  };
// 依赖数组改为空
}, []);

usePrevious 修复后代码 #

const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]); // 添加对应依赖
  return ref.current;
};

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