Re: 新手让网页 act 起来: Day30 - React hooks 之 useDebugValue

前言

今天要介绍最後一个 React hook - useDebugValue ，它也是个较少使用的 hook ，且它的使用必须搭配 React dev tools 与 custom hook 。那究竟它是用来做什麽的呢？就让我们来认识认识它吧！

useDebugValue

useDebugValue 的功用在当我们开启 React dev tools 时，可以看到 custom hook 的标签。让我们直接拿昨天的范例来看看吧！

function useLocalStorageState(key, initialValue = '') {
  const [state, setState] = React.useState(() => {
    const storageValue = window.localStorage.getItem(key)
    if (storageValue) return JSON.parse(storageValue)

    return typeof initialValue === 'function' ? initialValue() : initialValue
  })


  React.useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state))
  }, [state])

  return [state, setState]
}

function App() {
  const [name, setName] = useLocalStorageState('name', '')

  function onChangeHandler(e) {
    setName(e.target.value)
  }

  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input id="name" type="text" value={name} onChange={onChangeHandler} />
      </form>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

首先，让我打开 React dev tools 来看看 App 元件，来观察看看还没使用 useDebugValue 的状况。

再来，我们在 useLocalStorageState 中加上，useDebugValue

function useLocalStorageState(key, initialValue = '') {
  const [state, setState] = React.useState(() => {
    const storageValue = window.localStorage.getItem(key)
    if (storageValue) return JSON.parse(storageValue)

    return typeof initialValue === 'function' ? initialValue() : initialValue
  })

  React.useDebugValue('hello')

  React.useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state))
  }, [state])

  return [state, setState]
}

可以发现 LocalStorageState 就多了 'hello' 的标签。每一次当我们使用这个 custom hook 的时候就能够给它不同的标签，方便我们在检查的时候快速的找到想找的 custom hook

function useLocalStorageState(key, initialValue = '') {
  const [state, setState] = React.useState(() => {
    const storageValue = window.localStorage.getItem(key)
    if (storageValue) return JSON.parse(storageValue)

    return typeof initialValue === 'function' ? initialValue() : initialValue
  })

  React.useDebugValue(`${key}: ${state}`)

  React.useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(state))
  }, [state])

  return [state, setState]
}

function App() {
  const [name, setName] = useLocalStorageState('name', '')
  const [count, setCount] = useLocalStorageState('count', 0) // 多设置一个 state
//.....
}