Hook 4.useLocalStorage

import
 { useState, useEffect } 
from  
'react' 




const
 useLocalStorage = <T 
extends  
unknown
 >( 

  
key
 : 
string
 , 

  
initialValue
 : T 


): [T, 


( 


value: T

 ) =>  
void
 ] => { 

  
const

 [storedValue, setStoredValue] = 複製程式碼

useState
 <T>( () 
= 
>
 { 

    
try
 { 

      
const
 item = 
window

 .localStorage 

.getItem
     ( 
key) 

return
 item ? 

JSON
 .parse 
(item) : initialValue 
}


      





趕上
（錯誤）{

      
控制檯
。
error
 (error) 

      
return
 initialValue 


    } 


  }) 



  
const  
setValue
 = ( 
value: T
 ) => { 

    
try
 { 

      
setStoredValue
 (value)

      
視窗
。
本地儲存
。
setItem
 (key, 
JSON
 . 
stringify
 (value)) 


    } 
catch
 (error) {

      
控制檯
. 
錯誤
（錯誤）


    } 


  }



  
返回
[storedValue，setValue] 


}

useLocalStorage 是一個自定義掛鉤，可簡化localStorage 的使用 。 它提供了一個乾淨的介面，用於在處理 JSON 序列化和錯誤處理時獲取和設定 localStorage 中的值。

鉤子5.useToggle

import
 { useState, useCallback} 
from  
'react' 




const
 useToggle = ( 
initialValue
 : 
boolean
 ): [ 
boolean
 , 
() =>  
void
 ] => { 

  
const
 [value, setValue] = 
useState
 (initialValue) 



  
const
 toggleValue = 
useCallback
 ( 
() = >
 { 

    
setValue
 ( 



prevValue

 =>
 !prevValue) 


  }, []) 



  
return
 [value, toggleValue] 


}

useToggle 是一個簡單的鉤子，允許您切換布林值。 這在處理模式、下拉選單和其他需要開啟和關閉的 UI 元素時特別有用。

鉤子 6.useKeyPress

import
 { useState, useEffect } 
from  
'react' 




const
 useKeyPress = ( 
targetKey
 : 
string
 ): 



boolean

 =>
 { 

  
const
 [keyPressed, setKeyPressed] = 
useState
 ( 
false
 ) 



  
const  
downHandler
 = ( 
{ key }: KeyboardEvent
 ) => { 

    
if
 (key === targetKey) { 

      
setKeyPressed
 ( 
true
 ) 


    } 


  } 



  
const  
upHandler
 = ( 
{ key }: KeyboardEvent
 ) => { 

    
if
 (key === targetKey) { 

      
setKeyPressed
（
假
）


    } 


  } 



  
useEffect
（
（）=>
 { 

    
window.addEventListener

（

'keydown'
，
downHandler）

window.addEventListener
（

'keyup' 
，

 upHandler 
）

return （ 

）

=>
 { 
window.removeEventListener 

（
 ' 

keydown 

'
，downHandler）

window
。

removeEventListener
 ( 

'keyup'
 , upHandler) 
    } 
  }, [targetKey])

返回
keyPressed 
}


    






    
 


      




      










  

useKeyPress 是一個鉤子，用於偵聽特定的按鍵並返回一個布林值，指示當前是否按下該鍵。 這在構建鍵盤快捷鍵或處理鍵盤導航時很有用。

鉤子7.useInterval

import
 { useEffect, useRef } 
from  
'react' 




const  
useInterval
 = ( 


callback: () => 


void

 , delay: 


number

 | 


null
 ) => { 

  
const
 savedCallback = 
useRef
 (callback) 



  
useEffect
 ( 
() =>
 { 



    savedCallback.current 
= 
callback


   }, [callback]) 



  
useEffect
 ( 
() =>
 { 

    
if ( 


delay
 !== 
null
 ) { 

      
const
 id = 
setInterval
 ( 
() =>

 savedCallback.current 
(), delay)


      
return  
() =>  
clearInterval
 (id) 


    } 


  }, [延遲]) 


}

useInterval 是一個自定義掛鉤，允許您以指定的時間間隔執行函式。 這對於輪詢資料、動畫 UI 元素或實現倒數計時器很有用。

鉤子 8.useWindowSize

import
 { useState, useEffect } 
from  
'react' 




const
 useWindowSize = (): { 
width
 : 
number
 ; 
height
 : 
number
 } => { 

  
const
 [windowSize, setWindowSize] = 
useState
 ({ 

    
width
 : 
window
 . 
innerWidth
 , 

    
height
 : 
window
 . 
innerHeight
 , 


  }) 



  
const  
handleResize
 = ( 
) => { 

    
setWindowSize
 ({ 

      
width
 : 
window
 . 
innerWidth
 , 

      
height
:
視窗
。
innerHeight
 , 


    }) 


  } 



  
useEffect
 ( 
() =>
 { 

    
window
 . 
addEventListener
 ( 
'resize'
 , handleResize) 

    
return  
() =>  
window
 . 
removeEventListener
 ( 
'resize'
 , handleResize) 


  }, []) 



  
return
 windowSize 


}

useWindowSize 是一個返回當前視窗大小的鉤子。 這對於構建需要根據視口大小進行調整的響應式 UI 元件很有用。

鉤子 9.useCopyToClipboard

import
 { useState, useCallback, useEffect } 
from  
'react' 




const
 useCopyToClipboard = (): [ 
boolean
 , 


( 


text: 


string

 ) =>  
void
 ] => { 

  
const
 [isCopied, setIsCopied] = 
useState
 ( 
false
 ) 



  
const
 copyToClipboard = 
useCallback
 ( 


( 


text:



 string 



)

 =>
 { 

    
const
 el = 
document

 .createElement 
( 

'textarea'
 ) 
    el.value 

=
 text 

document
 .






    

身體
。
appendChild
 (el) 


    el。
選擇
()

    
檔案
。
execCommand
 ( 
'copy'
 )

    
檔案
。
身體
。
removeChild
 (el) 

    
setIsCopied
 ( 
true
 ) 


  }, []) 



  
useEffect
 ( 
() =>
 { 

    
if
 (isCopied) { 

      
const
 timeoutId = 
setTimeout
 ( 
() =>
 { 

        
setIsCopied
 ( 
false
 ) 


      }, 
2000
 ) 



      
return  
() =>  
clearTimeout
(timeoutId) 


    } 


  }, [isCopied]) 



  
return
 [isCopied, copyToClipboard] 


}

useCopyToClipboard 是一個自定義掛鉤，可簡化將文字複製到剪貼簿的過程。 它返回一個指示文字是否已被複制的 和一個接受要複製的文字的函式。 複製後，它會在 2 秒後自動將布林值重置為 false ，便於提供使用者反饋。

鉤子 10.useEventListener

import
 { useRef, useEffect } 
from  
'react' 




const  
useEventListener
 = ( 




  eventName: 


string

 , 



  handler: EventListener, 



  element: HTMLElement | Window = 


window


 ) => { 

  
const
 savedHandler = useRef< 
EventListener
 >() 



  
useEffect
 ( 
() =>
 { 



    savedHandler .current 
= handler 
} 
,


   [handler]) 



  
useEffect
 ( 
() =>
 { 

    
const  
eventListener
 = ( 
event: Event
 ) => { 

      
if

 (savedHandler.current 
) {



        儲存處理程式。
當前
（事件）


      } 


    }




    元素。
addEventListener
 (eventName, eventListener) 



    
return  
() =>
 {


      元素。
removeEventListener
 (eventName, eventListener) 


    } 


  }, [eventName, element]) 


}

useEventListener 是一個通用的鉤子，可以簡化新增和刪除事件偵聽器的過程。 它需要一個事件名稱、一個處理函式和一個可選元素（預設為 window ）。 此掛鉤會在元件安裝和解除安裝時自動處理新增和刪除事件偵聽器，確保正確清理。

10 個巧妙的 React 鉤子，它們可以幫助您編寫更高效和可維護的程式碼。

透過利用這些自定義掛鉤，您可以增強您的元件、提高程式碼的可重用性並創造更好的使用者體驗。

請記住，鉤子是現代 React 的重要組成部分，學習使用和建立自定義鉤子將使您成為更熟練的開發人員。