React Hooks各種函數(shù)介紹

　　- useState: useState是用于聲明一個(gè)狀態(tài)變量的，用于為函數(shù)組件引入狀態(tài). useState 只接收一個(gè)參數(shù)，這個(gè)參數(shù)可以是數(shù)字、字符串、對(duì)象等任意值，用于初始化聲明的狀態(tài)變量。

　　也可以是一個(gè)返回初始值的函數(shù)，最好是函數(shù)，可在渲染時(shí)減少不必要的計(jì)算。返回一個(gè)長(zhǎng)度為2的讀寫(xiě)數(shù)組，數(shù)組的第一項(xiàng)是定義的狀態(tài)變量本身，第二項(xiàng)是一個(gè)用來(lái)更新該狀態(tài)變量的函數(shù)，約定是set前綴加上狀態(tài)的變量名. useState Hook 中返回的 setState，并不會(huì)幫我們自動(dòng)合并對(duì)象狀態(tài)的屬性;

　　setState中接收的對(duì)象參數(shù)如果地址沒(méi)變的話會(huì)被React認(rèn)為沒(méi)有改變，因此不會(huì)引起視圖的更新

　　- useReducer: useReducer 是 useState 的升級(jí)版。

　　在useState中返回的寫(xiě)接口中，我們只能傳遞最終的結(jié)果，在setN的內(nèi)部也只是簡(jiǎn)單的賦值操作。 創(chuàng)建初始狀態(tài)值initialState, 創(chuàng)建包含所有操作的 reducer(state, action) 函數(shù)，每種操作類(lèi)型均返回新的 state 值 根據(jù) initialState 和 reducer 使用 const [state, dispatch] = useReducer(reducer, initialState) 得到讀寫(xiě)API調(diào)用寫(xiě)接口，傳遞的參數(shù)均掛在 action 對(duì)象上

　　- useContext: context是上下文的意思，上下文是局部的全局變量這個(gè)局部的范圍由開(kāi)發(fā)者自己指

　　- useEffect: effect是副作用的意思，對(duì)環(huán)境的改變就是副作用。副作用是函數(shù)式編程里的一個(gè)概念在React中，useEffect就是在每次render后執(zhí)行的操作，相當(dāng)于 afterRender， 接收的第一個(gè)參數(shù)是回調(diào)函數(shù)，第二個(gè)參數(shù)是回調(diào)時(shí)機(jī)?？捎迷诤瘮?shù)組件中模擬生命周期。 如果同時(shí)出現(xiàn)多個(gè) useEffect ，會(huì)按出現(xiàn)順序依次執(zhí)行

　　- useLayoutEffect useEffect總是在瀏覽器渲染完視圖過(guò)后才執(zhí)行，如果 useEffect 里面的回調(diào)函數(shù)有對(duì) DOM 視圖的操作，則會(huì)出現(xiàn)一開(kāi)始是初始化的視圖，后來(lái)執(zhí)行了 useEffect里的回調(diào)后立馬改變了視圖的某一部分，會(huì)出現(xiàn)一個(gè)閃爍的狀態(tài)。 為了避免這種閃爍，可以將副作用的回調(diào)函數(shù)提前到瀏覽器渲染視圖的前面執(zhí)行，當(dāng)還沒(méi)有將 DOM掛載到頁(yè)面顯示前執(zhí)行Effect中對(duì)DOM進(jìn)行操作的回調(diào)函數(shù)，則在瀏覽器渲染到頁(yè)面后不會(huì)出現(xiàn)閃爍的狀態(tài)。layout 是視圖的意思，useLayoutEffect 就是在視圖顯示出來(lái)前執(zhí)行的副作用。useEffect 和 useLayoutEffect就是執(zhí)行的時(shí)間點(diǎn)不同，useLayoutEffect是在瀏覽器渲染前執(zhí)行，useEffect 是在瀏覽器渲染后執(zhí)行。

　　但二者都是在render函數(shù)執(zhí)行過(guò)程中運(yùn)行，useEffect是在render完畢后執(zhí)行，useLayoutEffect是在render完畢前(視圖還沒(méi)渲染到瀏覽器頁(yè)面上)執(zhí)行。 因此 useLayoutEffect總是在useEffect前執(zhí)行。 一般情況下，如果Effect中的回調(diào)函數(shù)中涉及到 DOM 視圖的改變，就應(yīng)該用 useLayoutEffect，如果沒(méi)有，則用 useEffect。

　　- useRef useRef Hook是用來(lái)定義一個(gè)在組件不斷render時(shí)保持不變的變量。組件每次 render后都會(huì)返回一個(gè)虛擬DOM，組件內(nèi)對(duì)應(yīng)的變量都只屬于那個(gè)時(shí)刻的虛擬 DOM。useRef Hook就提供了創(chuàng)建貫穿整個(gè)虛擬DOM更新歷史的屬于這個(gè)組件的局部的全局變量。為了確保每次render后使用useRef獲得的變量都能是之前的同一個(gè)變量，只能使用引用做到，因此，useRef 就將這個(gè)局部的全局變量的值存儲(chǔ)到了一個(gè)對(duì)象中，屬性名為：current useRef的current變化時(shí)不會(huì)自動(dòng)render useRef可以將創(chuàng)建的 Refs對(duì)象通過(guò)ref屬性的方式引用到DOM節(jié)點(diǎn)或者React實(shí)例。

　　- useCallback是將某個(gè)函數(shù)“放入到react底層原型鏈上，并返回該函數(shù)的索引”，而useMemo是將某個(gè)函數(shù)返回值“放入到react底層原型鏈上，并返回該返回值的索引”。一個(gè)是針對(duì)函數(shù)，一個(gè)是針對(duì)函數(shù)返回值。

　　- useImperativeHandle： useImperativeHandle可以讓父組件獲取并執(zhí)行子組件內(nèi)某些自定義函數(shù)(方法)。本質(zhì)上其實(shí)是子組件將自己內(nèi)部的函數(shù)(方法)通過(guò)useImperativeHandle添加到父組件中useRef定義的對(duì)象中。

　　- useMemo useMemo可以將某些函數(shù)的計(jì)算結(jié)果(返回值)掛載到react底層原型鏈上，并返回該函數(shù)返回值的索引。

　　當(dāng)組件重新渲染時(shí)，如果useMemo依賴(lài)的數(shù)據(jù)變量未發(fā)生變化，那么直接使用原型鏈上保存的該函數(shù)計(jì)算結(jié)果，跳過(guò)本次無(wú)意義的重新計(jì)算，達(dá)到提高組件性能的目的。