描述

????React 官網(wǎng)對(duì)?useDebugValue?的描述原文

? ?useDebugValue?is a React Hook that lets you add a label to a custom Hook in React DevTools.

????useDebugValue 是一個(gè) React Hook, 它可以讓你在React DevTools中向自定義Hook添加標(biāo)記

????useDebugValue 是一個(gè) Debug 的工具Hook, 有點(diǎn)類似 console.log, 但是只有特定場(chǎng)景下才可以使用 useDebugValue, 從 React 給出的定義也能看出 useDebugValue 的作用是給自定義Hook 打標(biāo)記, 并不是日志輸出, 所以跟 console.log 沒(méi)有可比性.

場(chǎng)景

????這個(gè) Hook 猛然一看確實(shí)想不到有什么應(yīng)用場(chǎng)景, 不過(guò) React 官網(wǎng)給出了一個(gè)解釋:?

不要向每個(gè)自定義 Hook 添加調(diào)試值。它對(duì)于作為共享庫(kù)一部分并且具有難以檢查的復(fù)雜內(nèi)部數(shù)據(jù)結(jié)構(gòu)的自定義 Hook 來(lái)說(shuō)最有價(jià)值

????當(dāng)你在 React DevTools 中查看組件狀態(tài)的時(shí)候, 很多時(shí)候是以組件為維度查看的,因此 useDebugValue 在展示標(biāo)記的時(shí)候也是可以通過(guò)組件維度查看的, 所以如果一個(gè)組件被調(diào)用的地方比較多, 并且內(nèi)部有很多自定Hook, 且狀態(tài)很復(fù)雜, 就可以使用 useDebugValue 來(lái)給組件中的自定義Hook 打上標(biāo)記, 從而更方便的觀察組件狀態(tài)

參數(shù)

• value: any

  標(biāo)記值, 可以是任何類型的標(biāo)記, 傳入后會(huì)在控制臺(tái)輸出這個(gè)值的詳細(xì)內(nèi)容, 如果是對(duì)象的話, 并不會(huì)展示其繼承關(guān)系

• format: Function

  可選,?一個(gè)格式化函數(shù), 如果傳了這個(gè)函數(shù), React DevTools 在輸出 value 的時(shí)候, 會(huì)將value 傳入?format 函數(shù), 并將返回值輸出

返回

????useDebugValue 沒(méi)有返回值

用法

????在自定義Hook 中使用, 添加一個(gè)標(biāo)記, 并輸出在 React DevTools 的控制臺(tái), 之前說(shuō)過(guò), 使用 useDebugValue 必須在特定場(chǎng)景, 這個(gè)特定場(chǎng)景, 就是自定義Hook的方法體中, 如果在其他地方調(diào)用, 比如點(diǎn)擊事件中使用的話, 就會(huì)得到一個(gè)錯(cuò)誤:

????在函數(shù)組件的方法體中也可以使用, 雖然不報(bào)錯(cuò), 但是 React DevTools 控制臺(tái)也不會(huì)有任何輸出, 也就是說(shuō)是無(wú)效的, 所以還是推薦在自定義Hooks 中使用, 下面是一個(gè)完整例子:

? ? 上面這段代碼會(huì)在 React DevTools 控制臺(tái)中輸出下面的結(jié)果

????其中 TestDebug 就是我們打上的標(biāo)記, 后面的 0 是傳入 useDebugValue 的 count 值, 并且隨著頁(yè)面的操作, state 的變化也會(huì)實(shí)時(shí)同步在控制臺(tái)中, 所以其實(shí)也沒(méi)有必要在事件中使用 useDebugValue, 如果在同一個(gè)自定義Hook 中使用多次 useDebugValue, 那會(huì)在控制臺(tái)中輸出一個(gè)數(shù)組, 就像這樣:

????顯示結(jié)果:

????其中第二個(gè) useDebugValue, 傳入了一個(gè)字符串"測(cè)試文字",并沒(méi)有輸出, 而是通過(guò)后面的 format 函數(shù)返回了字符串的長(zhǎng)度 4, 因此數(shù)組第二項(xiàng)的值顯示的是?4.

????圖中可以看出與選中組件有關(guān)的所有 state 都會(huì)展示在這里, 但是并沒(méi)有做出區(qū)分, 如果state 和 props 很多的時(shí)候, 會(huì)難以分辨, 就像這樣:

?這樣看起來(lái)都是 State, 很難區(qū)分哪個(gè)是哪個(gè), 即便是打上標(biāo)記, 在復(fù)雜組件中, 這個(gè)工具的實(shí)用性還是太低.

總結(jié)

• useDebugValue 是一個(gè) Debug?的工具Hook, 可以給自定義Hook 打上一個(gè)標(biāo)記

• 接收連個(gè)參數(shù), 一個(gè) value, 一個(gè)是 format 格式化方法(可選), 沒(méi)有返回值

• 推薦在自定義Hook 的方法體中使用, 因?yàn)檎故镜臉?biāo)記值會(huì)實(shí)時(shí)更新, 所以沒(méi)有必要在事件中調(diào)用

• 多次調(diào)用, 會(huì)展示一個(gè)數(shù)組, 對(duì)象不會(huì)展示繼承關(guān)系

• 如果你有難以檢查的復(fù)雜內(nèi)部數(shù)據(jù)結(jié)構(gòu), 可以考慮使用 useDebugValue