你不知道的React Developer Tools，20 分鐘帶你掌握 9 個 React 組件調試技巧 _生活百科

文章插圖
壹 ? 引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 來處理當組件還未準備好的兜底場景，所以你常常看到類似如下的代碼：

const Button = React.lazy(() => import("./Button"));// 當 Button 組件為準備好，我們展示 Loading...<React.Suspense fallback="Loading..."><Button /></React.Suspense>

而事實上當 Button 組件加載過快，你根本無法感知 Loading 效果，那假設我現在要調試 Loading （它可能是一個其它組件）是否正常怎么辦呢？這時候我們就能使用手動掛起組件，先點擊你要掛起的組件，再點擊對應的圖標，如下圖：