React Scan
自動標示 React app 中造成效能問題元件的瀏覽器工具。
這是什麼
React Scan 會觀察執行中的 React app,自動標示造成效能問題的元件,協助從畫面直接找出值得檢查的更新。
為何推薦
它不必先替專案加入大量診斷程式碼,就能提供元件層級的視覺線索,適合先縮小 React 效能問題的範圍。
延伸建議
若想在編碼或 pull request 前找出正確性、可及性與可維護性問題,建議搭配 React Doctor。它以確定性靜態分析掃描 React 程式碼,正好補足 React Scan 的執行期觀察。
適合誰
維護 React 產品、需要定位不必要更新或元件效能瓶頸的前端團隊。
常用情境
- 在開發中的頁面快速確認哪些元件頻繁更新
- 針對被標示的元件檢查 props、state 與 render 邏輯
- 先從可見問題開始安排效能優化