重點：
1、封裝自定義Hooks函數，一定要用use開頭，這樣才能區分出什么是組件，什么是自定義函數
2、useCallback為緩存方法，useMome為緩存狀態/屬性，兩者都是優化性能
其實自定義Hooks函數和用Hooks創建組件很相似，跟我們平時用JavaScript寫函數幾乎一模一樣，可能就是多了些React Hooks的特性，自定義Hooks函數偏向於功能，而組件偏向於界面和業務邏輯。由於差別不大，所以使用起來也是很隨意的。如果是小型項目是可以的，但是如果項目足夠復雜，這會讓項目結構不夠清晰。所以學習自定義Hooks函數還是很有必要的。
編寫自定義函數
在實際開發中，為了界面更加美觀。獲取瀏覽器窗口的尺寸是一個經常使用的功能，這樣經常使用的功能，就可以封裝成一個自定義Hooks函數，記住一定要用use開頭，這樣才能區分出什么是組件，什么是自定義函數。
新建一個文件Example9.js,然后編寫一個useWinSize,編寫時我們會用到useState、useEffect和useCallback所以先用import進行引入。
|
1
|
import
React, { useState ,useEffect ,useCallback } from
'react'
;
|
然后編寫函數，函數中先用useState設置size狀態，然后編寫一個每次修改狀態的方法onResize，這個方法使用useCallback，目的是為了緩存方法(useMemo是為了緩存變量)。 然后在第一次進入方法時用useEffect來注冊resize監聽時間。為了防止一直監聽所以在方法移除時，使用return的方式移除監聽。最后返回size變量就可以了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function
useWinSize(){
const [ size , setSize] = useState({
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
})
const onResize = useCallback(()=>{
setSize({
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
})
},[])
useEffect(()=>{
window.addEventListener(
'resize'
,onResize)
return
()=>{
window.removeEventListener(
'resize'
,onResize)
}
},[])
return
size;
}
|
這就是一個自定義函數，其實和我們以前寫的JS函數沒什么區別，所以這里也不做太多的介紹。
編寫組件並使用自定義函數
自定義Hooks函數已經寫好了，可以直接進行使用，用法和JavaScript的普通函數用起來是一樣的。直接在Example9組件使用useWinSize並把結果實時展示在頁面上。
|
1
2
3
4
5
6
7
8
9
|
function
Example9(){
const size = useWinSize()
return
(
<div>頁面Size:{size.width}x{size.height}</div>
)
}
export
default
Example9
|
之后就可以在瀏覽器中預覽一下結果，可以看到當我們放大縮小瀏覽器窗口時，頁面上的結果都會跟着進行變化。說明自定義的函數起到了作用。
.