場景

假設你在做一個搜尋引擎的前端，你在輸入框輸入nihaoa，這個時候你按下F12，開啟網路請求那個tab，你發現了很恐怖的事情。

原來是因為我們傳送網路請求的函式一旦發現輸入框的中的value發生改變就會重新發送網路請求。

這顯然會造成網路資源的浪費，這並不是我們想要的。

使用自定義debounce hook解決

解釋一下，value就是你在輸入框輸入的值，然後我們使用useState重新包裹一下這個值，並使用useEffect鉤子函式，使其依賴value。最後返回被包裹後的value，也就是debouncedValue。

這樣的話，你只需要傳送網路請求時使用debouncedValue

梳理一下流程:
1.在輸入框輸入內容value,value發生改變就使用setValue方法修改value的值。
2.value改變，觸發在useDebounce中的useEffect鉤子函式，該函式首先清理上次設定的計時器，然後重新設定一個新的計時器。
3.如果delay時間後value沒有繼續變化，那麼setDebouncedValue才會指向修改deBouncedValue的值
4.負責傳送網路請求的函式發現deBouncedValue改變，重新發送網路請求。