一.useState
hooks就是在函數(shù)組件中使用state通過useState實現(xiàn)的澜术。
useState傳入一個初始值,生成一個數(shù)組膳汪,數(shù)組的第一位就是設置的變量茄袖,這里是count,第二位是對變量進行改變的函數(shù)雏胃,這里是setCount踢步,可以對count進行修改的。
二.useEffect
useEffect相當于react的componentDidMount丑掺,componentDidUpdate获印,componentWillUnmount?三個生命周期函數(shù)的組合,
useEffect能夠返回一個函數(shù)街州,用來清除上一次副作用留下的狀態(tài)兼丰。
useEffect還可以傳第二個參數(shù):
1.什么都不傳,組件每次?render?之后?useEffect?都會調用,相當于componentDidMount?和?componentDidUpdate蛹锰;
2.傳入一個空數(shù)組 [], 只會調用一次狼讨,相于componentDidMount和componentWillUnmount;
3.傳入一個數(shù)組艳丛,其中包括變量,只有這些變量變動時趟紊,useEffect?才會執(zhí)行氮双。
三.useContext
useContext的使用相當于react中的父組件傳值子組件,首先需要去創(chuàng)建一個context用createContext霎匈,然后通過創(chuàng)建的context提供value給其子組件戴差,最后在子組件里面使用這個context就用到了useContext。
四.useReducer
userReducer的思想和redux相似铛嘱,useReducer接收兩個參數(shù)暖释,第一個參數(shù)是一個函數(shù),第二個參數(shù)是useReducer變量的初始值墨吓,它返回一個變量和一個dispatch函數(shù)球匕,再通過dispatch來改變變量。
五.useMemo
useMemo用來緩存數(shù)據(jù)帖烘,數(shù)據(jù)是需要通過計算而來亮曹,就可以用這個函數(shù)來緩存這個數(shù)據(jù),以至于我們在修改它們沒有依賴的數(shù)據(jù)源的情況下,多次調用這個計算函數(shù)乾忱,浪費計算資源讥珍。
上面的例子中只有當性別改變的時候才會調用changeSex方法,姓名的改變不會調用該方法窄瘟,可以節(jié)省資源衷佃。
六.useCallback
緩存一個函數(shù),這個函數(shù)如果是父組件傳遞給子組件蹄葱,或者自定義hooks里面的函數(shù)氏义,可以緩存這個函數(shù),不用每次重新聲明新的函數(shù)图云,避免釋放內(nèi)存惯悠、分配內(nèi)存的計算資源浪費,子組件不會因為這個函數(shù)的變動重新渲染竣况。
七.useRef
useRef和ref非常相似克婶,useRef可以獲取dom還可以存儲值。
上面的例子中丹泉,剛開始的inputEl是獲取了dom情萤,后來的textRef是存儲了text這個值。
對于react hooks的介紹就這么多了摹恨,以上是react hooks中常用的函數(shù)筋岛,前三個函數(shù)是react hooks中最基本的函數(shù)。