如何优化基于Socket.IO的React应用实时数据流传输与渲染性能

核心优化方向：

• 修正数组长度控制逻辑，遵循React immutable更新原则
• 添加数据处理节流，降低高频推送带来的渲染压力
• 完善Socket事件监听的清理逻辑，避免内存泄漏和无效更新
• 组件渲染优化，减少不必要的重渲染

1. 数组长度控制逻辑修复 #

原有代码存在两个错误：

1. 直接对state引用做splice操作，属于直接修改state，会导致React状态更新异常
2. indexOf(len)逻辑错误，无法正确定位到数组最后一位元素
   优化后的dataGather代码：

const dataGather = useCallback((data1) => {
  setGD(prevGD => {
    // 新数据插入头部，最多保留50条，超过自动移除最后一位
    return [data1, ...prevGD].slice(0, 50)
  })
}, [])

2. 解决数据流速率过高、UI卡顿问题 #

高频数据推送会导致React频繁触发状态更新和重渲染，最终卡死UI，添加节流逻辑控制数据处理频率，比如限制每秒最多处理16次数据（符合人眼流畅度需求，可根据图表渲染性能调整）：

// 节流函数：控制函数在指定间隔内只执行一次
const throttle = (fn, delay) => {
  let lastCall = 0
  return (...args) => {
    const now = Date.now()
    if (now - lastCall >= delay) {
      lastCall = now
      fn(...args)
    }
  }
}

优化Socket监听逻辑，用useRef代替原有count state避免闭包问题：

// 新增ref标记模态框是否已打开
const modalOpenedRef = useRef(false)

useEffect(() => {
  const handleWave = throttle((data1) => {
    // 首次收到数据打开模态框
    if (!modalOpenedRef.current) {
      modalOpenedRef.current = true
      setShowModal(true)
    }
    dataGather(data1)
  }, 60) // 60ms间隔对应每秒约16次更新

  socket.on("connect", () => {
    console.log("connected Successfully");
  });
  socket.on('wave', handleWave)

  // 组件卸载时清理监听，避免内存泄漏
  return () => {
    socket.off('wave', handleWave)
    socket.disconnect()
  }
}, [dataGather])

3. 解决关闭模态框后数据长时间更新问题 #

增加控制逻辑，模态框关闭后停止处理数据，同时清空GD数组释放内存：

const hideModal = useCallback(() => {
  setShowModal(false)
  modalOpenedRef.current = false
  setGD([]) // 清空历史数据
  // 若不需要后台接收数据，可在此处直接断开Socket连接，下次打开再重连
}, [])

4. 模态框组件优化 #

模态框卡顿的核心原因是图表组件频繁无差别重渲染，给Graph组件添加React.memo优化，只有GD或zoom变化时才重渲染：

const Graph = React.memo(({ GD, zoom }) => {
  // 原有图表逻辑
})

同时调整模态框内的useEffect依赖：如果handleChannelId只需要在模态框打开时执行一次，就把依赖改成[show]，不需要监听GD变化，减少不必要的逻辑执行。

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