文章插圖
貳 ? 肆 props 在線交互我們常常遇到某個組件的 props 傳遞沒達到預期的情況，你需要排查某個屬性是否達到了你想要的效果，這個時候在線修改 props 比你去改代碼然后觸發構建要快得多 ， 比如我直接修改 Button 的 type 類型 ， 然后你發現按鈕背景色變了 。
文章插圖
類似的場景非常多，比如我們需要看遮罩層顯示隱藏，讓
list 下拉默認展示出來等等，我們都能通過此方法達到效果 。除了直接修改
props，我們還能把 props 保存到控制臺操作，比如有時候我們沒辦法查看源碼 ， 但你又希望知曉某個方法的執行是否符合你的預期 ， 這時候你能這么做：
文章插圖
比如上圖我并未點擊按鈕 ， 單純通過控制臺執行了
setState 讓數字增1 。貳 ? 伍 2 種方式快速定位組件在哪個文件被創建 。針對于找一個組件在哪，常見有兩種場景：
- 某個組件可能有
bug，因此我想知道這個組件在哪定義方便去修改 。 - 某個頁面的組件有
bug，懷疑是props傳遞有問題，因此我想知道在這個組件在哪里被使用 。
文章插圖
第二種辦法稍微麻煩點，我們能在控制臺直接輸出組件完整的信息 ， 其中就包含組件聲明的文件路徑，具體操作如下：
文章插圖
點擊控制臺輸出組件信息的圖標，點開
nodes ，點開__reactFiber 前綴，找到_debugSource即可 。貳 ? 陸 4 種方式快速定位組件在哪個文件被使用（精確到行）方式一，直接看
source 信息 ， 它會直接告訴你在哪個文件的多少行：
文章插圖
文章插圖
方式二，一鍵自動打開
vscode 并跳轉到對應行數，先看效果：
文章插圖
有同學就說了，我怎么沒這個圖標按鈕，其實只需要一個簡單的配置就好了，大家復制
vscode://file/{path}:{line} 到下圖位置即可：
文章插圖
注意，此配置因項目復雜度可能有失效的情況 ， 目前我測試了 windows 以及 mac 雙環境下
create-react-app 項目均能正常跳轉，mac 用戶請保證vscode安裝目錄在application 下 ， 而不是下載目錄中，這能減少很多不必要的麻煩 。方式三，同樣通過控制臺輸出組件信息 ， 可以看到使用的文件以及行數都有輸出，如下：
【你不知道的React Developer Tools，20 分鐘帶你掌握 9 個 React 組件調試技巧】
文章插圖
貳 ? 柒 過濾無意義組件層讓組件結構更清晰事實上 ， 組件開發因為
ref以及context等等的嵌套，會讓插件中的組件結構過于臃腫，而這些層級往往是你不需要關注的 ， 因此你可以通過過濾配置來屏蔽一些無意義的層級，比如：
文章插圖
貳 ? 捌 了解組件無效渲染嚴重層度雖然目前項目還未對組件無效渲染提出要求，不過我們還是能通過如下配置知曉每個組件的渲染情況，如下：
文章插圖
推薦閱讀
- 簡易版 純css愛心代碼-最近超級火的打火機與公主裙中的愛心代碼
- JAVA開發搞了一年多的大數據，究竟干了點啥
- 八 pod：pod的調度——將 Pod 指派給節點
- JAVA的File對象
- 原神須彌地區死域有什么效果
- 原神巡林小隊三號林區位置在哪
- 原神巡林小隊二號林區位置在哪
- 原神巡林小隊一號林區位置在哪
- 陰陽鍋防空洞的密碼有哪些
- 自費研究生的培養方式是統分還是自籌呢 培養方式統分