React Hook 基礎學習
前言
Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
Hook 允許我們按照代碼的用途分離他們
熟悉API
| hook | 而外需要注意點 |
|---|---|
useState |
一般來說，在函數退出後變量就會”消失”，而 state 中的變量會被 React 保留 |
useEffect |
1. 可以讓你在函數組件中執行副作用操作2. 會在每次渲染後都執行 3. React 保證了每次運行 effect 的同時，DOM 都已經更新完畢 |
useReducer |
1. useState 的替代方案。2. 它接收一個形如 (state, action) => newState 的 reducer，並返回當前的 state 以及與其配套的 dispatch 方法 |
useCallback |
1. 返回一個 memoized 回調函數。 2. 該回調函數僅在某個依賴項改變時纔會更新 3. 返回緩存的值(函數) |
useMemo |
1. 返回一個 memoized 回調函數。 2. 該回調函數僅在某個依賴項改變時纔會更新 3. 返回緩存的值(變量) |
useRef |
1. 當 ref 對象內容發生變化時，useRef 並不會通知你。。 2. 變更 .current 屬性不會引發組件重新渲染 3.很方便地保存 任何可變值 |
useImperativeHandle |
1. 可以讓你在使用 ref 時自定義暴露給父組件的實例值 2. useImperativeHandle 應當與 forwardRef 一起使用 |
快問快答
useEffect
- 那些常見的副作用
數據獲取，設置訂閱以及手動更改 React 組件中的 DOM 都屬於副作用。
- useEffect 做了什麼 ?
保存你傳遞的函數（我們將它稱之爲 “effect”），並且在執行 DOM 更新之後調用它
- 爲什麼在組件內部調用 useEffect ?
將 useEffect 放在組件內部讓我們可以在 effect 中直接訪問 count state 變量（或其他 props）
- 爲什麼要在 effect 中返回一個函數 ?
這是 effect 可選的清除機制。每個 effect 都可以返回一個清除函數
- React 何時清除 effect ?
React 會在組件卸載的時候執行清除操作
useReducer
- React 使用 什麼 比較算法 來比較 state ?
Object.is參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
衍生 問題
1. Object.is 和 == 的區別
2. Object.is 和 === 的區別
3. == 和 === 的區別
備註： Object.is 不會做類型隱式轉換 （即 先判斷類型 在判斷值）
useMemo / useCallback
- useMemo和useCallback都會在組件第一次渲染的時候執行，之後會在其依賴的變量發生改變時再次執行；
- 並且這兩個hooks都返回緩存的值，useMemo返回緩存的變量，useCallback返回緩存的函數。
傳入 useMemo 的函數會在渲染期間執行。請不要在這個函數內部執行與渲染無關的操作，諸如副作用這類的操作屬於 useEffect 的適用範疇，而不是 useMemo
useRef
- useRef() 和自建一個 {current: …} 對象的唯一區別是？
useRef 會在每次渲染時返回同一個 ref 對象