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 的重要组成部分，学习使用和创建自定义钩子将使您成为更熟练的开发人员。