iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 12
3
Modern Web

從 Hooks 開始,讓你的網頁 React 起來系列 第 12

[Day 12] 快速了解各組件的資料狀態 - React DevTools

現在我們已經用 React 完成了兩個簡單的網頁程式,分別是計數器和網速單位轉換器。你會漸漸感受到每個 React 組件內部都可以保有自己的資料狀態,以帶有多個不同起始值和最大、最小值的計數器來說,除非我們透過程式去檢視,直接透過瀏覽器是無法了解每個 React 組件內部的資料狀態的。

好在 React 提供了友善的開發者工具,讓開發者只需要從瀏覽器就可以去檢視和修改每個 React 組件內各自的資料狀態。

React 開發者工具支援 ChromeFirefox 瀏覽器,分別可以在各自的擴充套件商店下載(Chrome 擴充套件Firefox 擴充套件)。

Imgur

現在就請你先根據習慣使用的瀏覽器下載對應的 React 開發者工具,在這裡我們就以 Chrome 為例來說明使用方式。

檢視頁面內的 React 組件

下載好 React 開發者工具後,打開前幾天在 CodePen 完成的 Day 11 - Multiple Counters with different min and max number by propsDay 11 - Network Speed Converter with props 接著切換到 Debug 模式,讓它進入一個乾淨獨立的畫面:

Imgur

打開瀏覽器的開發者工具後,會看到多了兩個名為 ComponentsProfiler 的頁籤:

Imgur

先來點選 Components 的部分,從中可以看到 React 開發者工具會列出該頁面的所有 React 組件。

像是在計數器中,會顯示這頁一共有使用到 5 次 <Counter /> 組件:

Imgur

而在網速轉換器中,則會用階層的方式顯示各組件的關係,可以看到 <SpeedConverter /> 這個組件內還包含了 <UnitControl /><CardFooter /> 這兩個部分:

Imgur

除了可以直接在 Components 頁籤中去檢視各個組件之外,有些時候因為複雜的頁面會同時使用非常多的組件,或各組件嵌套的情形比較嚴重時,也可以從比較熟悉 Elements 頁籤先找到想檢視的元素,點選後再切換到 Components 頁籤,如此 React 開發者工具會直接幫你去選到該組件:

Imgur

透過 React 開發者工具,該頁面使用到的 React 組件就可以一目瞭然。

檢視和修改 React 組件內的資料狀態

透過 React 開發者工具除了能夠檢視該頁面使用了哪些 React 組件之外,還可以去檢視和修改該組件內的資料狀態,只需要點選該組件後即可在下方看到 propsstate

Imgur

還記得 propsstate 是指什麼嗎?

props 就是指由外部傳入該組件內的資料,以上圖為例,就是因為在使用該組件時是透過 <Counter maxNumber="30" minNumber="21" startingValue="25" /> 這種方式把資料帶入該組件內的。

hooks 裡面的 State 表示的是該組件自身內部的資料,也就是使用 useState 產生的資料。

不論是 propsstate 的值都可以直接在 React 開發者工具內進行修改,這在檢查程式邏輯的時候非常方便,例如我們可以直接透過修改 statemaxNumber 等欄位看看畫面是不是如我們預期的,在特定條件下「向上/下箭頭」就會消失:

Imgur

Components 中的其他功能

React 開發者工具除了上述常用的功能之外,右邊也有一些按鈕可以使用:

Imgur

  • 點擊「碼表」適合用在有套用 React.Suspense 的組件,這種組件因為需要等到 AJAX 資料回來後才會開始渲染對應的畫面,因此會需要有「等待」的畫面。
  • 點擊「眼睛」會直接切換到 Elements 頁籤,讓你看到該組件在 DOM 中的位置,方便透過瀏覽器直接去調整 CSS 樣式。
  • 點擊「蟲蟲」後會在 console 頁籤顯示該組件有關的資料狀態,方便複製或透過 JavaScript 直接在該頁籤操作資料。
  • 點擊「原始碼」會直接切換到 Sources 頁籤,並顯示該組件位於程式碼中的哪個部分,在偵錯時也非常方便。

效能檢視 Profilers

此外,除了 Components 頁籤之外,React 開發者工具中還提供了一個 Profilers 頁籤,這個頁籤主要是用來檢視效能的,當網頁中有很多組件需要渲染,而且又需要透過非同步的方式取得資料回來更新畫面的情況下,有些時候再資料狀態沒有處理好的情況下,可能會使得這些組件多了一些不必要的渲染次數。

在這種情況下,透過 Profilers 頁籤可以去看該頁面內各組件渲染所花費的時間和次數:

Imgur

要使用這個工具需要點選錄影的「●」符號開始記錄,接下來可以按下右方的「重新整理」按鈕,然後正常操作該頁面,好的時候再點選一次錄影符號即會停止紀錄。在設定中還可以開啟提示,React 開發者工具就會提示你該組件重新渲染的原因,這一點在實際開發要找問題的時候還蠻方便的:

Imgur

更多關於 Profilers 的使用可以進一步參考 React 在官方網站 的說明。

參考資料


上一篇
[Day 11 - 網速轉換器] 那個...資料可以分享給我嗎 - 將資料傳入組件
下一篇
[Day 13 - 即時天氣] 建立一個即時天氣 App - 前置準備
系列文
從 Hooks 開始,讓你的網頁 React 起來30

1 則留言

0
lorishsu
iT邦新手 5 級 ‧ 2020-01-06 10:01:18

你好,PJ:

您寫的文章,真的是讓我受益無窮。

我在這一篇嘗試用您所說的CODE PEN DEBUG VIEW去看,但是好像已經沒有了DEBUG VIEW,去網路上看,說現在要用FULL VIEW去看。

另外,我安裝完CHROME的外掛Components後,也看不到組件的樹狀,出現一堆Provider,應該不是程式區塊的Components??

pjchender iT邦新手 5 級 ‧ 2020-01-07 10:13:58 檢舉

Hi

  1. CodePen 的 Debug Mode 需要是自己的檔案才可以喔,所以你需要先把這裡示範的 CodePen 複製(fork)一份成自己的才能。
  2. 第二個情況我不太清楚,可能需要你再多描述一下。

我要留言

立即登入留言