對React Hook 的整理
阿新 • • 發佈:2020-12-17
React Hook
1. 什麼是 React Hook
官方回答:Hook是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
從官網的這句話中,我們可以明確的知道,Hook增加了函式式元件中state
的使用,我們可以輕鬆的在函式式元件中維護我們的狀態,不需要更改為class
元件。
React16.8 加入 hooks,讓 React 函式式元件更加靈活React16.8 ,之前的hock存在的問題,如下:- 在元件間複用狀態邏輯很難
- 複雜元件變得難以理解,高階元件和函式元件的巢狀過深。
- class 元件的 this 指向問題
- 難以記憶的生命週期
- useState 返回有狀態值,以及更新這個狀態值的函式
- useEffect 接受包含命令式,可能有副作用程式碼的函式。
- useContext 接受上下文物件(從 React.createContext 返回的值)並返回當前上下文值,
- useReducer useState 的替代方案。接受型別為(state,action) => newState 的 reducer,並返回與 dispatch 方法配對的當前狀態。
- useCallback 返回一個回憶的 memoized 版本,該版本僅在其中一個輸入發生更改時才會更改。純函式的輸入輸出確定性
- useMemo 純的一個記憶函式
- useRef 返回一個可變的 ref 物件,其.current 屬性被初始化為傳遞的引數
- useImperativeMethods 自定義使用 ref 時公開給父元件的例項值
- useMutationEffect 更新兄弟元件之前,它在 React 執行其 DOM 改變的同一階段同步觸發
- useLayoutEffect DOM 改變後同步觸發。使用它來從 DOM 讀取佈局並同步重新渲染
2、函式元件使用hock之後生命週期與類元件中生命週期的區別