零、動(dòng)機(jī)
? ? 1、在組件之間復(fù)用狀態(tài)邏輯很難，React 需要為共享狀態(tài)邏輯提供更好的原生途徑
? ? 2、復(fù)雜組件變得難以理解，生命周期內(nèi)同一個(gè)函數(shù)內(nèi)部的操作，可能有獲取數(shù)據(jù)，訂閱變動(dòng)等不相關(guān)的邏輯
? ? 3、難以理解的 class，JavaScript 中?this?的工作方式
PS：hook在class不起作用，帶有hook的函數(shù)組件跟class是一樣的，可以取代class
一、useState
? ? 需要定義成響應(yīng)式的變量，都需要useState聲明，這是函數(shù)組件內(nèi)部的狀態(tài)變量，
? ? 不能在if里面，為函數(shù)組件提供了自己的狀態(tài)變量，
? ??一般來說，在函數(shù)退出后變量就會(huì)”消失”，而 state 中的變量會(huì)被 React 保留
二、useEffect? ? ? ??
? ? 執(zhí)行時(shí)機(jī)：在瀏覽器完成布局與繪制之后
? ??componentDidMount：會(huì)在組件掛載后（插入 DOM 樹中）立即調(diào)用
? ??componentDidUpdate：會(huì)在更新后會(huì)被立即調(diào)用
? ? 銷毀：return的函數(shù)會(huì)在組件即將銷毀時(shí)(componentWillUnmount)調(diào)用，effect 的清除階段在每次重新渲染（render）之前都會(huì)執(zhí)行，而不是只在即將卸載組件的時(shí)候執(zhí)行一次
? ? useEffect接受兩個(gè)參數(shù)，第一個(gè)effect，第二個(gè)是依賴，useEffect會(huì)在瀏覽器渲染完成，對(duì)比依賴項(xiàng)是否改變，再執(zhí)行effect
????所以u(píng)esEffect可以當(dāng)做componentDidMount,?componentDidUpdate,?componentWillUnmount的結(jié)合
? ? useEffect默認(rèn)每次重新渲染（render后）都執(zhí)行
1、阻止每次渲染都執(zhí)行
????????useEffect(effect, [value])?
? ? ? ? 以上，在每次組件重新渲染的時(shí)候，useEffect會(huì)判斷value是不是變了，如果沒變，就會(huì)跳過effect
2、僅在掛載和卸載的時(shí)候執(zhí)行? ? ??
????useEffect(() => {? // do something? return 'doing'}, [])? ? ??
3、僅在掛載的時(shí)候執(zhí)行
????useEffect(effect)
三、useContext
? ? 跨組件層級(jí)數(shù)據(jù)獲取
? ??<MyContext.Provider>?的 value 發(fā)生變化時(shí)候， 調(diào)用了?useContext?的組件總會(huì)在變化時(shí)重新渲染
四、useCallback
? ? ? ? 返回緩存的函數(shù)
useCallback(fn,? deps)?相當(dāng)于?useMemo(() => fn,? deps)。
? ? 當(dāng)一個(gè)函數(shù)被傳遞給，經(jīng)過使用引用相等性去避免非必要渲染的子組件時(shí)，會(huì)很有用，子組件校驗(yàn)函數(shù)是否變化
五、useMemo
????返回緩存的值（類似于vue 的 computed） ，其他屬性同上，傳入useMemo的函數(shù)會(huì)在渲染期間執(zhí)行，不要在函數(shù)內(nèi)執(zhí)行與渲染無關(guān)的操作?
? ? 意思就是，dom render的時(shí)候，每次都先執(zhí)行useMemo，之后整合好最新的dom，在交給瀏覽器渲染
? ? 但是主要是用來，在return的dom中使用的變量（包括傳入子組件的），每次在state變得時(shí)候，在進(jìn)行渲染，期間，用到的函數(shù)和變量，會(huì)不分好壞，都執(zhí)行一遍，所以，為了避免重復(fù)工作，用useMemo或者useCallback，來使用緩存，提高性能
六、useRef
? ??useRef?返回一個(gè)可變的 ref 對(duì)象，其 current?屬性被初始化為傳入的參數(shù)（initialValue）。返回的 ref 對(duì)象在組件的整個(gè)生命周期內(nèi)保持不變，類似于組件內(nèi)的全局變量。useRef?會(huì)在每次渲染時(shí)返回同一個(gè) ref 對(duì)象。變更?.current?屬性不會(huì)引發(fā)組件重新渲染
七、useLayoutEffect
? ??它會(huì)在所有的 DOM 變更之后同步調(diào)用 effect?？梢允褂盟鼇碜x取 DOM 布局并同步觸發(fā)重渲染，也就是，DOM變更之后 且 渲染之前，會(huì)阻塞瀏覽器繪制。
? ? 跟useEffect一樣，只是調(diào)用時(shí)機(jī)不一樣
八、useImperativeHandle
? ??可以讓你在使用?ref?時(shí)自定義暴露給父組件的實(shí)例值
