文章插圖
壹 ? 引
React Developer Tools 是 React 官方推出的開發者插件，可以毫不夸張的說，它在我們日常組件開發中，對于組件屬性以及文件定位 ， props 排查等等場景都扮演者至關重要的角色；毋庸置疑 ， 熟練使用React Developer Tools 能讓你的日常開發更加高效 。而我對于目前前端團隊同學做了隨機調查，詢問了大家對于
React Developer Tools 的使用情況，以及如何定位某個組件在哪個文件被創建，某個組件又是在哪個文件被使用的習慣，了解到的情況是部分同學沒使用React Developer Tools 全憑經驗搜索，或者有使用但不多，日常還是會根據組件類名在項目中進行全局搜索 。這樣做當然也可以，但依舊會有如下幾個問題：- 需要研發同學對于項目結構以及大部分組件足夠清晰，這對于新入職的同學是一個挑戰 。
- 某個方法名或者類名在項目中并不唯一（比如
handleClick隨處可見），這加大了定位的難度 。
- 未來組件庫將采用
css in js模式，類名隨機生成讓類名定位的方式不再可能 。
React Developer Tools 非常有必要，于是就有了這篇文章 。這篇文章帶大家系統性了解React Developer Tools 這款插件，通過本文你將學會：- 掛起組件模擬組件加載緩慢場景
- 快速定位組件所對應的真實
dom。 - 快速定位組件
props中某個函數在何處創建 。 - 無需改代碼，
props在線交互感知組件變化 。 - 2 種方式快速定位組件在哪個文件被創建 。
- 4 種方式定位組件在哪個文件被使用（精確到行） 。
- 過濾無意義組件層讓組件結構更清晰
- 了解組件無效渲染嚴重層度
chrome 商店安裝這款瀏覽器插件 ， 注意，它只會對 React 所寫的頁面生效 ， 在刷新頁面后 ， 你會發現控制臺多出了Components 與 Profiles 兩個選項，本文著重介紹 Components，關于 Profiles 將在性能篇單獨探討 。
文章插圖
貳 ? 你應該知道的 React Developer Tools貳 ? 壹 掛起組件模擬組件加載緩慢場景我們常常用
React.lazy 來懶加載組件 ， 以避免組件未使用而被提前加載 。但如果使用 React.lazy 我們還得結合 React.Suspense 來處理當組件還未準備好的兜底場景 ， 所以你常?？吹筋愃迫缦碌拇a：const Button = React.lazy(() => import("./Button"));// 當 Button 組件為準備好，我們展示 Loading...<React.Suspense fallback="Loading..."><Button /></React.Suspense>而事實上當 Button 組件加載過快，你根本無法感知 Loading 效果，那假設我現在要調試 Loading （它可能是一個其它組件）是否正常怎么辦呢？這時候我們就能使用手動掛起組件，先點擊你要掛起的組件 ， 再點擊對應的圖標 ， 如下圖：
文章插圖
貳 ? 貳 快速定位組件對應的真實DOM日常開發中我們常常會遇到要修改組件樣式的問題，那么如何找到組件所對應的真實
DOM 呢？查找類名是一種辦法，其實還有更簡單的辦法，操作如下:
文章插圖
當然，也許它定位的仍然不是你所希望的具體節點 ， 但起碼它能幫你將
DOM 的節點范圍進一步縮小，讓你更快找到你希望看到的節點 。貳 ? 叁 定位組件
props 中某個函數在何處創建 。我們常常會遇到需要查找某個組件 props 中某個方法是在哪定義的，它可能是從隔了五六層的組件所傳遞，假設這個方法名像 handleClick這么常見，搜索也非常麻煩，我們可以通過 < > Go to definition 快速知曉：
文章插圖
這樣你就知道這個方法是在哪個文件所創建，復制文件的路徑去編輯器搜一下馬上就可以定位到了 。是不是比搜方法名要快得多呢？
推薦閱讀
- 簡易版 純css愛心代碼-最近超級火的打火機與公主裙中的愛心代碼
- JAVA開發搞了一年多的大數據，究竟干了點啥
- 八 pod：pod的調度——將 Pod 指派給節點
- JAVA的File對象
- 原神須彌地區死域有什么效果
- 原神巡林小隊三號林區位置在哪
- 原神巡林小隊二號林區位置在哪
- 原神巡林小隊一號林區位置在哪
- 陰陽鍋防空洞的密碼有哪些
- 自費研究生的培養方式是統分還是自籌呢 培養方式統分