一.useState
hooks就是在函數組件中使用state通過useState實現的。
useState傳入一個初始值,生成一個數組,數組的第一位就是設置的變量,這里是count,第二位是對變量進行改變的函數,這里是setCount,可以對count進行修改的。
二.useEffect
useEffect相當于react的componentDidMount,componentDidUpdate,componentWillUnmount?三個生命周期函數的組合,
useEffect能夠返回一個函數,用來清除上一次副作用留下的狀態。
useEffect還可以傳第二個參數:
1.什么都不傳,組件每次?render?之后?useEffect?都會調用,相當于componentDidMount?和?componentDidUpdate;
2.傳入一個空數組 [], 只會調用一次,相于componentDidMount和componentWillUnmount;
3.傳入一個數組,其中包括變量,只有這些變量變動時,useEffect?才會執行。
三.useContext
useContext的使用相當于react中的父組件傳值子組件,首先需要去創建一個context用createContext,然后通過創建的context提供value給其子組件,最后在子組件里面使用這個context就用到了useContext。
四.useReducer
userReducer的思想和redux相似,useReducer接收兩個參數,第一個參數是一個函數,第二個參數是useReducer變量的初始值,它返回一個變量和一個dispatch函數,再通過dispatch來改變變量。
五.useMemo
useMemo用來緩存數據,數據是需要通過計算而來,就可以用這個函數來緩存這個數據,以至于我們在修改它們沒有依賴的數據源的情況下,多次調用這個計算函數,浪費計算資源。
上面的例子中只有當性別改變的時候才會調用changeSex方法,姓名的改變不會調用該方法,可以節省資源。
六.useCallback
緩存一個函數,這個函數如果是父組件傳遞給子組件,或者自定義hooks里面的函數,可以緩存這個函數,不用每次重新聲明新的函數,避免釋放內存、分配內存的計算資源浪費,子組件不會因為這個函數的變動重新渲染。
七.useRef
useRef和ref非常相似,useRef可以獲取dom還可以存儲值。
上面的例子中,剛開始的inputEl是獲取了dom,后來的textRef是存儲了text這個值。
對于react hooks的介紹就這么多了,以上是react hooks中常用的函數,前三個函數是react hooks中最基本的函數。