概念:自定義Hook是以u(píng)se打頭的函數(shù)懒震,通過自定義Hook函數(shù)可以用來實(shí)現(xiàn)邏輯的封裝和復(fù)用
例:元素顯示隱藏
// 自定義Hook
function useToggle(){
const [show, setShow] = useState(true)
const toggle = () => setShow(!show)
return {
show,
toggle
}
}
const {show,toggle}= useToggle()
<div className="App">
{show&&<div>一個(gè)元素</div>}
<button onClick={toggle}>顯示/隱藏</button>
</div>
ReactHook使用規(guī)則(useState、useEffect、自定義Hook衅澈、嗅榕、、)
- 只能在組件中或者自定義Hook函數(shù)中調(diào)用
- 只能在組件的頂層調(diào)用火焰,不能嵌套在if劲装,for,其他函數(shù)中