快捷導(dǎo)航

React處理高頻的實時數(shù)據(jù)的解決方案

更新時間：2025年11月19日 08:24:09 作者：mCell

本文介紹了在開發(fā)一個實時日志查看器時遇到的React錯誤Maximum update depth exceeded（超過最大更新深度）,并分析了問題的根源,解決了這個問題,需要的朋友可以參考下

問題的根源：高頻更新

起初我以為是哪里的更新邏輯不對，讓 claude 排查很久都沒找到具體問題。在給現(xiàn)有函數(shù)增加了不少緩存，比如useMemo，useCallback，甚至 React.memo 都使用上了，仍舊沒有解決這個報錯。

代碼沒有問題，那么問題就應(yīng)該出現(xiàn)在一些極端場景導(dǎo)致的高頻渲染。比如網(wǎng)絡(luò)？我才打開控制臺的網(wǎng)絡(luò)部分，看到幾乎在很短時間內(nèi)，上百條的 log 被推送過來！

到這里問題就和清晰了：當(dāng)服務(wù)器在短時間內(nèi)（比如 1 秒內(nèi)）推送上百條日志時，每一個 log 都觸發(fā)了 React 進行重新渲染，這里觸發(fā)了 React 的某些機制，React 對這種行為發(fā)出了報錯。

React 內(nèi)部有一個“嵌套更新計數(shù)器”，用來防止無限循環(huán)。

簡單說，如果在一次渲染（Render）的過程中，又因為某些原因觸發(fā)了新的狀態(tài)更新，這就叫“嵌套更新”。當(dāng)這個次數(shù)短時間內(nèi)超過一個閾值（通常是 50 次），React 就會認為你“可能”寫了一個 Bug，于是主動拋出錯誤，終止程序。

我們的問題就出在這里。SSE 的事件回調(diào)來得太快了。

當(dāng)服務(wù)器在 1 秒內(nèi)推送 150 條日志時，瀏覽器的事件循環(huán)會瘋狂執(zhí)行回調(diào)：

SSE 事件 1 抵達 → appendLog() → 觸發(fā) React 更新（第 1 次）
React 還沒來得及渲染，SSE 事件 2 抵達 → appendLog() → 觸發(fā) React 更新（第 2 次）
...
SSE 事件 50 抵達 → appendLog() → 觸發(fā) React 更新（第 50 次）
SSE 事件 51 抵達 → appendLog() → 觸發(fā) React 更新（第 51 次）

在 React 看來，這 51 次更新幾乎是“同時”發(fā)生的，它無法分辨這是“51 條獨立日志”還是“一個死循環(huán)”。為了保護自己，它選擇了報錯。

問題的本質(zhì)是：數(shù)據(jù)接收的頻率（高頻）和 React 狀態(tài)更新的頻率（低頻）不匹配。

我們不能每收到一條數(shù)據(jù)，就立刻更新一次狀態(tài)。

后續(xù)我了解到 React 18 版本對高頻渲染的問題進行了優(yōu)化，但它目前僅適用于 React 事件處理函數(shù)內(nèi)的同步更新。對于 SSE 回調(diào)、fetch 回調(diào)、setInterval 等異步事件源觸發(fā)的更新，仍需手動實現(xiàn)批處理。

解決方案：批處理（Batching）

既然不能一條一條地更新，那很自然就想到，能不能把日志“攢一下”，再一次性提交給 React？

這就是“批處理”（Batching）思想。

我們不再是“來一條，更新一次”，而是“來 N 條，更新一次”。

實現(xiàn)這個功能的關(guān)鍵，是需要一個“緩沖區(qū)”（Buffer）和一個“定時器”（Timer）。

緩沖區(qū)：需要一個地方暫存日志，但這個地方本身不能是 React 的 state（否則又觸發(fā)渲染了）。useRef 是最合適的人選。
定時器：需要一個機制，在“攢”日志的間隙，把它們統(tǒng)一提交。setTimeout(..., 0) 是這里的法寶。

代碼實現(xiàn)

我們來改造一下 log 事件的處理。

首先，在組件里定義緩沖區(qū)和定時器：

export default function LogPage() {
  // 1. 從 store 獲取批量更新的方法
  const appendLogs = useLogStore((state) => state.appendLogs)

  // 2. 批處理緩沖區(qū)（使用 ref 不會觸發(fā)渲染）
  const batchBufferRef = useRef([])

  // 3. 定時器引用（保證只有一個定時器在運行）
  const batchTimerRef = useRef(null)

  // ...
}

其次，實現(xiàn)一個“提交緩沖區(qū)”的函數(shù) flushBatch：

// 4. 批量提交函數(shù)
const flushBatch = useCallback(() => {
  // 如果緩沖區(qū)有數(shù)據(jù)
  if (batchBufferRef.current.length > 0) {
    // 一次性提交給 store
    appendLogs(batchBufferRef.current)
    // 清空緩沖區(qū)
    batchBufferRef.current = []
  }
  // 重置定時器引用
  batchTimerRef.current = null
}, [appendLogs]) // 依賴 appendLogs

最后，修改 SSE 的事件處理函數(shù) handleLogEvent：

// 5. 新的 SSE 事件處理函數(shù)
const handleLogEvent = useCallback(
  (event) => {
    const entry = {
      /* ...解析日志... */
    }

    // 重點：不再直接調(diào)用 appendLog
    // 而是將日志加入緩沖區(qū)
    batchBufferRef.current.push(entry)

    // 如果還沒有計劃批處理，則在下一個事件循環(huán)中執(zhí)行
    if (batchTimerRef.current === null) {
      batchTimerRef.current = window.setTimeout(flushBatch, 0)
    }
  },
  [flushBatch] // 依賴 flushBatch
)