Hook 前言
什麼是Hook
自從 16.8 版本開始，hooks 的出現使得你可以在不編寫 class 的情況下使用狀態管理以及其它 React 的特性。
那麼在 React Hooks 出現之前，class 類元件和 function 函式元件有什麼區別？Hooks 出現之後，函式元件又是如何滿足原來只有類元件才有的功能的？
1.類元件和沒有 hooks 加持的函式元件：
函式元件常被稱為無狀態元件，意思就是它內部沒有狀態管理，只能做一些展示型的元件或者是完全受控元件。因此差別主要體現在：
- 函式元件沒有內部狀態管理
- 函式元件內部沒有生命週期鉤子
- 函式元件不能被獲取元件例項 ref，函式元件內也不能獲取類元件的 ref
2.類元件和有 hooks 加持的函式元件：
有了 hooks 加持之後，函式元件具備了狀態管理，除了可以使用內建的 hooks ，我們還可以自定義 hooks。
- 類元件有完備的生命週期鉤子，而函式元件只能具備：DidMount / WillUnmount / DidUpdate / willUpdate
- 函式元件內部可以通過內建 hook 獲取類元件 ref，也可以通過一些 API 的組合使用達到獲取函式元件 ref 的功能
- 函式元件具備了針對狀態變數的 setter 監聽（類似於 vue watch），類元件沒有這種 API。（useCallback、useEffect、useMemo等）
類元件原本比函式元件更加完整，為什麼還需要 hooks？
這要說到 React 的設計理論：
- React 認為，UI 檢視是資料的一種視覺對映，即 UI = F(DATA) ，這裡的 F 需要負責對輸入的資料進行加工、並對資料的變更做出響應
- 公式裡的 F 在 React 裡抽象成元件，React 是以元件為粒度編排應用的，元件是程式碼複用的最小單元
- 在設計上，React 採用 props 來接收外部的資料，使用 state 屬性來管理元件自身產生的資料（狀態），而為了實現（執行時）對資料變更做出響應需要，React 採用基於類 Class 的元件設計
- 除此之外，React 認為元件是有生命週期的，因此開創性地將生命週期的概念引入到了元件設計，從元件的 create 到 destroy 提供了一系列的 API 共開發者使用
類元件 Class Component 的困局
元件狀態邏輯複用困局
對於有狀態元件的複用，React 團隊和社群嘗試過許多方案，早期使用 CreateClass + Mixins，使用 Class Component 後又設計了 Render Props 和 HOC，再到後來的 Hooks設計，React 團隊對於元件複用的探索一直沒有停止。
HOC 和 Render Props 都有自己的缺點，都不是完美的複用方案（詳情瞭解 React HOC 和 Render Props），官方團隊認為應該為共享狀態邏輯提供更好的原生途徑。在 Hooks 加持後，功能相對獨立的部分完全抽離到 hook 實現，例如網路請求、登入狀態、使用者核驗等；也可以將 UI 和功能（狀態）分離，功能放到 hook 實現，例如表單驗證。
複雜元件變得難以理解
我們經常維護一些元件，它們起初很簡單，但是逐漸會被狀態邏輯和副作用充斥。在多數情況下，不可能將元件拆分為更小的粒度，因為狀態邏輯無處不在。這也給測試帶來了挑戰。Hook 可將元件中相互關聯的部分拆分成更小的函式
JavaScript Class 的缺陷
- this的指向問題（語言缺陷）
- 編譯後體積和效能的問題
同樣功能的類元件和函式元件，在經過 Webpack 編譯後體積相差明顯，也伴隨著一定的效能問題。這是因為 class 在 JavaScript 中本質是函式，在 React 內部也是當做 Function類 來處理的。而函式元件編譯後就是一個普通的 function，function 對 JS 引擎是友好的。
內建 Hooks
useState
const [state, setState] = useState(initialState);
用來承擔與類元件中的 state 一樣的作用，元件內部的狀態管理
function () {
const [ count, setCount ] = useState(0);
const onClick = () => {
setCount( count + 1 );
// setCount(count => count + 1);
};
return <div onClick={onClick}>{ count }</div>
}
除了直接傳入最新的值，還可以函式式更新，這樣可以訪問到先前的 state。如果你的初始 State 建立比較昂貴時，可以傳一個函式給 useState：
function Table(props) {
// ⚠️ createRows() 每次渲染都會被呼叫
const [rows, setRows] = useState(createRows(props.count));
// ...
}
function Table(props) {
// ✅ createRows() 只會被呼叫一次
const [rows, setRows] = useState(() => createRows(props.count));
// ...
}
如果是複雜型別的 state，需要傳入修改後的完整的資料，不再像類元件中的 setState 可以自動合併物件，需要手動合併：
setState(prevState => ({...prevState, ...updatedValues}));
此外，useReducer 是另一種可選的方案。
useEffect
useEffect(func, [deps]);
可以用來模擬生命週期，即可以完成某些副作用。什麼叫副作用？一般我們認為一個函式不應該對外部產生影響，一旦在函式內部有某些影響外部的操作，將其稱之為副作用。例如改變 DOM、改變 Window物件（Global）、設定定時器、使用原生API繫結事件等等，如果處理不好，它們可能會產生 bug 併產生破壞。
如果只傳一個引數，每次元件渲染都會執行回撥函式（掛載+跟新），相當於 componentDidMount() + componentDidUpdate()
返回值函式：在元件更新前、元件解除安裝時執行，相當於 componentWillUnmount() + componentWillUpdate()
useEffect(() => { // 每次渲染後執行此函式，獲取到的值是最新的
console.log("Effect after render", count);
return () => { // 每次執行useEffect前，先執行此函式，獲取到的資料是更新之前的值
console.log("remove last", count);
}
});
第二個引數是依賴列表，當依賴的狀態資料發生改變時會執行回撥
1.如果是一個空陣列，表示沒有依賴項
- 回撥函式：只在元件掛載的時候執行一次，相當於 componentDidMount()
- 返回值函式：只在元件解除安裝的時候執行一次，相當於 componentWillUnmount()
2.如果有值
- 回撥函式：除了具有 componentDidMount()，還當 陣列內的變數發生變化時執行 componentDidUpdate()
- 返回值函式：除了具有 componentWillUnmount()，還當 陣列內的值發生變化時執行 componentWillUpdate()
需要注意的是，
1.第二個引數的比較其實是淺比較，傳入引用型別進去是無意義的
2.一個元件內可以使用多個 useEffect，它們相互之間互不影響
3.useEffect 第一個引數不能是 async 非同步函式，因為它總是返回一個 Promise，這不是我們想要的。你可以在其內部定義 async 函式並呼叫
useLayoutEffect
它與 useEffect 的用法完全一樣，作用也基本相同，唯一的不同在於執行時機，它會在所有的 DOM 變更之後同步呼叫 effect，可以使用它來
useEffect 不會阻塞瀏覽器的繪製任務，它會在頁面更新之後才執行。而 useLayoutEffect 跟 componentDidMount 和 componentDidUpdate 的執行時機一樣，會阻塞頁面渲染，如果當中有耗時任務的話，頁面就會卡頓。大多數情況下 useEffect 比 class 的生命週期函式效能更好，我們應該優先使用它。
如果你正在將程式碼從 class 元件遷移到使用 Hook 的函式元件，則需要注意 useLayoutEffect 與 componentDidMount、componentDidUpdate 的呼叫階段是一樣的。但是，我們推薦你一開始先用 useEffect，只有當它出問題的時候再嘗試使用 useLayoutEffect。
useReducer
const [state, dispatch] = useReducer(reducer, initialArg, init);
useState 的替代方案，它接收一個 (state, action) => newState 的 reducer 處理函式，並返回當前的 state 和 配套的 dispatch 方法。使用方法與 redux 非常相似。
某些場景下，useReducer 比 useState 更加適用：
- 當狀態變數比較複雜且包含多個子值的時候
- 下一個 state 依賴之前的 state
const initialState = {count: 0};
function init(initialCount) {
return {count: initialCount};
}
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter(props) {
const [state, dispatch] = useReducer(reducer, initialState);
// const [state, dispatch] = useReducer(reducer, props.initialCount, init);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
此外，它還可以模擬 forceUpdate()
const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
function handleClick() {
forceUpdate();
}
useCallback
const memoizedCallback = useCallback(func, [deps]);
useCallback 快取了方法的引用。它有的作用：效能優化，父元件更新，傳遞給子元件的函式指標不會每次都改變，只有當依賴項發生改變的時候才會改變指標。避免了子元件的無謂渲染
它的本質是對函式依賴進行分析，依賴變更時才重新執行。
useMemo & React.memo
useMemo 用於快取一些耗時的計算結果（返回值），只有當依賴項改變時才重新進行計算。
useCallback(func, [deps]) 等同於 useMemo(() => func, [deps])
useCallback 快取的是方法的引用，useMemo 快取的是方法的返回值，適用場景都是避免不必要的子元件渲染。
在類元件中有 React.PureComponent，與之對應的函式元件可以使用 React.memo，它們都會在自身 re-render 時，對每一個 props 項進行淺對比，如果引用沒有發生改變，就不會觸發渲染。
那麼，useMemo 和 React.memo 有什麼共同點呢？前者可以在元件內部使用，可以擁有比後者更細粒度的依賴控制。它們兩個與 useCallback 的本質一樣，都是進行依賴控制。
useContext
專門為函式元件提供的 context hook API，可以更加方便地獲取 context 的值。
const value = useContext(MyContext);
useContext(MyContext) 接收一個 context 物件，當前獲取到的值由上層元件中距離最近的 <MyContext.Provider> 的 value 決定。
useContext(MyContext) 相當於之前的 static contextType = MyContext 或者 <MyContext.Consumer>
useRef
const refContainer = useRef(initialValue);
useRef 返回一個可變的 ref 物件，其 current 屬性被初始化為傳入的引數。返回的 ref 物件在元件的整個生命週期內保持不變。
注意：此 hook 可以獲取 DOM 元素、類元件示例，但無法獲取函式元件例項，因為函式元件根本沒有例項。如果想讓函式元件被獲取到 ref，可以使用 useImperativeHandle 來達到這樣的效果
另外，useRef 獲取到的“ref”物件是一個 current 屬性可變且可以容納任意值的通用容器。可以實現如下功能：
- 模擬例項變數
- 獲取 prevProps、prevState
// 當做 class 例項變數
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
// ...
});
intervalRef.current = id;
return () => {
clearInterval(intervalRef.current);
};
});
// ...
}
// 獲取prevProps，prevState
function Counter(props) {
const [count, setCount] = useState(0);
const prevProps = useRef(props);
const prevCount = useRef(count);
useEffect(() => {
prevCount.current = count;
prevProps.current = props;
});
return <h1>Now: {count} - {props}, before: {prevCount.current} - {prevProps.current}</h1>;
}
useImperativeHandle
useImperativeHandle 可以讓你在使用 ref 時自定義對外暴露的屬性。官方指出，它應當與 forwardRef 一起使用。
示例：
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
此時，通過 ref 獲取到 FancyInput 的"例項"，其 current 屬性內只有 foucs 屬性可供訪問