1. 程式人生 > 實用技巧 >對React Hook 的整理

對React Hook 的整理

React Hook

1. 什麼是 React Hook

官方回答:Hook是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。

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

2、函式元件使用hock之後生命週期與類元件中生命週期的區別