React hooks

react:

1、useState——創(chuàng)建狀態(tài)

接收一個參數(shù)作為初始值;返回一個數(shù)組，第一個值為狀態(tài)，第二個值為改變狀態(tài)的函數(shù)2、useEffect——副作用(數(shù)據(jù)獲取、dom操作影響頁面——在渲染結(jié)束之后執(zhí)行

1)第一個參數(shù)為函數(shù)，第二個參數(shù)為依賴列表，只有依賴更新時才會執(zhí)行函數(shù);返回一個函數(shù)，當(dāng)頁面刷新的時候先執(zhí)行返回函數(shù)再執(zhí)行參數(shù)函數(shù)(2)如果不接受第二個參數(shù)，那么在第一次渲染完成之后和每次更新渲染頁面的時候，都會調(diào)用useEffect的回調(diào)函數(shù)

3、useRef

返回一個可變的ref對象，此索引在整個生命周期中保持不變?？梢杂脕慝@取元素或組件的實例，用來做輸入框的聚焦或者動畫的觸發(fā)。4、useMemo——優(yōu)化函數(shù)組件中的功能函數(shù)——在渲染期間執(zhí)行

(1)）接收一個函數(shù)作為參數(shù)，同樣接收第二個參數(shù)作為依賴列表，返回值可以是任何，函數(shù)、對象等都可以(2）這種優(yōu)化有助于避免在每次渲染時都進(jìn)行高開銷的計算，僅會在某個依賴項改變時才重新計算

5、useContext——獲取上下文注入的值

(1)接受一個context對象，并返回該對象<MyContext.Provider>元素的value值;

const value = useContext(MyContext);

6、useLayoutEffect——有DOM操作的副作用——在DOM更新之后執(zhí)行

和useEifetl類似，但是執(zhí)行時機不同，useLayouEfiect在DOM更新之后執(zhí)行，useEfiect在render渲染結(jié)束后執(zhí)行，也就是說useL ayoutEfiect比useEfic先執(zhí)行，這是因為DOM更新

之后，渲染才結(jié)束或者渲染還會結(jié)束

7、useCallback——與useMemo類似

useMemo與useCallback相同，接收一個函數(shù)作為參數(shù)，也同樣接收第二個參數(shù)作為依賴列表;useCallack是對傳過來的回調(diào)函數(shù)優(yōu)化，返回的是一個函數(shù)

react-router:

被route包裹的組件，可以直接使用props進(jìn)行路由相關(guān)操作，但是沒有被route包裹的組件只能用withRouter高階組件修飾或者使用hooks進(jìn)行操作1、useHistory——跳轉(zhuǎn)路由

2、useLocation——得到url對象3、useParams——得到url上的參數(shù)

react-redux:

1、useSelector——共享狀態(tài)——從redux的store中提取數(shù)據(jù)

2、useDispatch——共享狀態(tài)——返回redux的store中對dispatch的引用