React Scan
Aiden Bai / Million Software, Inc. · 程式設計
React Scan 是一款免費的開源工具，能找到並標示出造成效能問題的 React 元件，而且不必修改程式碼。
關於 React Scan
React Scan 是什麼
React Scan 是一款輕量的 JavaScript 工具，會觀察執行中的 React 應用程式，並標記出重新渲染次數超出預期的元件。React 比較 props 時看的是參照而非值。因此，每次渲染都產生新的物件或函式，很容易悄悄溜進來，而這個無聲的錯誤，正是許多 React 應用程式明明程式碼看起來沒問題卻顯得遲緩的原因。
React Scan 不靠猜測，而是在每個元件渲染時在其周圍畫出方框，並依渲染所花的時間深淺著色。渲染越重，閃爍越明顯。你盯著頁面看，元凶就會自己現身。
它對單純的設定也能運作。你不必改寫任何一個元件。也不需要建置步驟。這套極簡的安裝方式，正是這款工具鎖定早已深陷框架設定堆疊的開發者時，最完整的賣點。
開始使用
- 在專案中執行
npx -y react-scan@latest init。這個指令會偵測你的框架、安裝套件，並替你接好指令稿。 - 或者用
npm install -D react-scan手動安裝，並在index.html中把 unpkg 的 script 標籤放在其他所有 script 之前。 - 在瀏覽器載入你的應用程式。元件在渲染時會閃爍，工具列則停在頁面上。
- 點擊閃爍的元件，查看渲染次數與耗時，然後修改那段每次都重新計算 props 的程式碼。
- 在正式環境關掉它。它是為開發環境打造的，而官方文件也警告不要在實際的建置中強制開啟。
產品資訊
快速了解 React Scan 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 正在調校遲緩介面的 React 開發者：React Scan 直接指向值得修復的元件，讓你把時間花在真正的問題上，而不是慢慢捲動火焰圖。
- 沒有專職效能專家的前端團隊：視覺化的標示讓團隊中任何人都能注意到浪費掉的渲染，不只是當初架設效能分析流程的那個人。
任務
- 找出被浪費的重新渲染：這款工具會標記不斷重新渲染的元件，讓你在參照相等性的錯誤累積之前就察覺。
- 除錯頁面為何在互動時卡頓：渲染耗時會即時顯示。你能把一次延遲的點擊，連結到背後肇因的元件。
- 稽核元件庫：一次掃描滿是 props 的共用元件，抓出那些在每次上層更新時都重新計算的元件。
- 及早發現緩慢的渲染：耗時越長的渲染著色越深，最糟的元凶會最先浮現。
情境
- 儀表板在圖表陸續填入時慢如蝸牛：React Scan 會讓那些不斷重新渲染、而不重複使用資料的圖表小工具閃爍。
- 表單在每次按鍵時都延遲：這款工具會顯示哪些與輸入相關的元件會在每打一個字時重新渲染。
- 新同事加入龐大的 React 程式碼庫：他打開應用程式、開啟 React Scan，便能了解哪些部分背負著效能的重量。
主要功能
不必修改程式碼
你不必更動元件就能加入 React Scan。放進一個 script 標籤，或執行 init 指令即可。它會自行接上應用程式。沒有包裝元件、沒有高階函式，就算你之後決定移除，也沒有東西需要清理。
視覺化渲染標示
這款工具會在每個元件渲染時勾勒外框，並依渲染時間為外框上色。緩慢的渲染立刻就會跳出來。你不必先讀表格裡的數字；只要盯著頁面，讓視覺引導你走向問題所在。
多種安裝途徑
你可以透過 unpkg 的 script 標籤載入 React Scan、將它安裝成 npm 套件，或使用瀏覽器擴充功能。針對 Next.js、Remix 與單純設定都有專門的指南。你不會被丟下，去翻譯一份為其他技術堆疊寫的文件。
工具列與即時選項
掃描時頁面上會停著一條工具列，你可以不必重新啟動就開啟或關閉掃描。scan 與 useScan 函式負責啟動，setOptions 與 getOptions 在執行時調整，而當你需要看得更仔細時，onRender 能掛進單一元件。
主控台記錄與計時鉤子
開啟 log 選項，每次渲染都會連同耗時印到主控台。commit 鉤子（onCommitStart 與 onCommitFinish）會在每次渲染流程前後觸發，當你想把 React 的工作與畫面上所見對應起來時很有幫助。
開源且免費
React Scan 由 Aiden Bai 與 Million Software, Inc. 以 MIT 授權釋出。沒有付費層級、沒有人數上限，也不必註冊。原始碼放在 GitHub 上。專案公開接受貢獻與錯誤回報。
優缺點
優點
- 零設定阻力：init 指令會替你處理框架偵測與安裝。
- 視覺化回饋讓被浪費的渲染連非效能專家也一目了然。
- 免費且採 MIT 授權，能直接放進商業專案，不必先談預算。
- 適用於單純 React、Next.js、Remix，以及瀏覽器擴充功能的使用方式。
- 當覆蓋層不夠用時，執行時 API 與 onRender 鉤子能讓你深入挖掘。
缺點
- 它只在開發環境執行，因此抓不到只在正式組建中才出現的效能問題。
- 視覺覆蓋層只顯示在畫面上，這表示你無法掃描沒有介面的環境，也無法在伺服器渲染的頁面送達瀏覽器之前掃描它。
- 如果你對 npm 或 script 標籤不熟悉，安裝仍需要你在專案裡做一個小步驟，而文件也預設你對 React 有些認識。
常見問題
是。React Scan 是以 MIT 授權釋出的開源軟體，沒有付費方案，也不必註冊帳號。你安裝套件後就能在自己的專案中免費使用。
相關內容
探索與 React Scan 相關的工具、技能與文章。
React Scan 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。