人在身處逆境時，適應環境的能力實在驚人。人可以忍受不幸，也可以戰勝不幸，因為人有著驚人的潛力，只要立志發揮它，就一定能渡過難關。 Hooks 是 React 16.8 的新增特性。它可以讓你在不編寫 class 組件的情況下使用 state 以及其他的 React 特性。 React Hooks 表 ...
人在身處逆境時，適應環境的能力實在驚人。人可以忍受不幸，也可以戰勝不幸，因為人有著驚人的潛力，只要立志發揮它，就一定能渡過難關。
Hooks 是 React 16.8 的新增特性。它可以讓你在不編寫 class 組件的情況下使用 state 以及其他的 React 特性。
React Hooks 表現形式是以 use 開頭的函數被稱為 Hook。useState 是 React 提供的一個內置 Hook。你可以在 React API 參考 中找到其他內置的 Hook。你也可以通過組合現有的 Hook 來編寫屬於你自己的 Hook。
跟普通函數相比，Hook 比普通函數更為嚴格。你只能在你的組件（或其他 Hook）的頂層調用 Hook。如果你想在一個條件或迴圈中使用 useState，請提取一個新的組件併在組件內部使用它。
為什麼要使用 Hooks？
- 解決高階類組件復用，導致代碼層級複雜問題。
- React 組件生命周期的複雜，用於代替生命周期函數。
- 如果一個類一開始設計成了 function 組件，無狀態組件，因為需要狀態，又改成了 class 成本高。
1. State Hook
State 讓組件“記住”用戶輸入之類的信息。例如，表單組件可以使用 state 來存儲輸入值，而圖片庫組件可以使用 state 來存儲所選的圖像索引。要給組件添加狀態，可以使用以下介紹的鉤子之一。
1.1 useState
useState 是一個 React Hook。它允許你向組件添加一個狀態變數。模擬類組件的狀態管理。
// usss
const [state, setstate] = usestate(initialState)
1.2 useReducer
useReducer 是一個 React Hook，它允許你向組件裡面添加一個 reducer，來維護一個狀態 state。useReducer 不支持非同步處理，非同步處理需要藉助於 Hooks useEffect。
在單個組件中實現狀態管理，理解 useReducer 的使用。
const [state, dispatch] = useReducer(reducer, initialState)
其次配合 useContext 跨級通信。將數據邏輯（即狀態管理）從組件中（視圖邏輯）分離出來通過外部管理，降低組件耦合度。對於單個組件來說意義不大，但是對於多個組件數據需要共用狀態的時候很方便。
2. Context Hook
2.1 useContext
useContext 是一個 React Hook，可以讓你讀取和訂閱組件中的 context。減少組件層級，便於組件跨級通信處理。
useContext 配合 useState、useContext 配合 useReducer。
3. Ref Hooks
Refs 允許組件保存一些不用於呈現（渲染）的信息，比如 DOM 節點或超時 ID。與 state 不同，更新 ref 並不會重新呈現組件。React 提供了 useRef hook 來描述。
3.1 useRef
保存引用值：
const ref = useRef(initialValue)
4. Effect Hooks
Effect 允許組件 連接到外部系統並與之同步。這包括處理網路、瀏覽器、DOM、動畫、使用不同 UI 庫編寫的 widgets 以及其他非 React 代碼。
Effect Hooks 副作用鉤子函數很好模擬了類組件的生命周期函數。但是我們知道 Function Component 不存在生命周期，所以不要把 Class Component 的生命周期概念搬過夾試圖對號入座。
4.1 useEffect
useEffect 是一個 React Hook，它允許你 連接到外部系統並與之同步。
useEffect(setup, dependencies?)
// 處理副作用
useEffect(() => {
// 副作用函數處理代碼塊 { 比如數據請求，定時器 }
console.log("effect")
return () => {
console.log("cleanup")
// cleanup
// 執行時機：無依賴情況下：組件銷毀執行 有依賴情況下：依賴更新和組件銷毀的時候
}
}, [ name /* 依賴的狀態，如果為空表示不依賴任何狀態 */])
依賴：不要對 Dependencies 撒謊，如果你明明在 effect 中使用了某個變數，卻沒有申明在依賴中，你等於向 React 撒了謊，後果就是，當依賴的變數改變時，useEffect 也不會再次執行，eslint 會報警告。
4.2 useLayoutEffect
useLayoutEffect 是 useEffect 的一個版本，在瀏覽器重新繪製屏幕之前觸發。useLayoutEffect 內部的代碼和所有計劃的狀態更新阻塞了瀏覽器重新繪製屏幕。如果過度使用，這會使你的應用程式變慢。如果可能的話，儘量選擇 useEffect。
然後如果 Effect 一定要阻止瀏覽器繪製屏幕，使用 useLayoutEffect 替換 useEffect。請註意，絕大多數的 Effect 都不需要這樣。只有當在瀏覽器繪製之前運行 Effect 非常重要的時候才需要如此：例如，在用戶看到 tooltip 之前測量並定位它。
4.3 useInsertionEffect
useInsertionEffect 是為 CSS-in-JS 庫的作者特意打造的。除非你正在使用 CSS-in-JS 庫並且需要註入樣式，否則你應該使用 useEffect 或者 useLayoutEffect。
4.4 Effect Hooks 之間區別
簡單來說就是調用時機不同，useLayoutEFfect 和原來 componentDidMount & componentDidUpdate 一致，在 React 完成 Dom 更新後馬上同步調用的代碼，即在瀏覽器重新繪製屏幕之前觸發 useLayouteEffect。你可以在這裡測量佈局。會阻塞頁面渲染（渲染樹）。
useEffect 是會在整個頁面渲染完才會調用的代碼。
useInsertionEffect 會在 React 修改 DOM 之前觸發。可以在這裡插入動態 CSS。
官方建議優先使用 useEffect
However, we recommend starting with useEffect first and only trying useLayoutEffect if that causes a problem.
在實際使用時如果想避免頁面抖動（即在 useEffect 里修改 Dom 很有可能出現）的話，可以把需要操作 Dom 的代碼放在 useLayoutEffect 里。在這裡做點 Dom 操作，這些 Dom 修改會和 react 做出的更改一起被一次性渲染到屏幕上，只有一次迴流、重繪的代價。
5. 性能 Hook
5.1 useMemo
useMemo 是一個 React Hook，它在每次重新渲染的時候能夠緩存、使用計算的結果。
const cachedValue = useMemo(calculateValue, dependencies)
useMemo(() => first, [second])
記憶純函數計算結果、跳過組件的重新渲染，記憶一個函數。
對於使用 useMemo 記憶一個函數，這看起來很笨拙！記憶函數很常見，React 有一個專門用於此的內置 Hook。將你的函數包裝到 useCallback 而不是 useMemo 中，以避免編寫額外的嵌套函數。 即 useCallback 的唯一好處是它可以讓你避免在內部編寫額外的嵌套函數。它沒有做任何其他事情。
5.2 useCallBack
useCallback 是一個允許你在多次渲染中緩存函數的 React Hook。記憶函數，防止因為組件重新渲染，導致組件內部定義的方法被重新創建，起到緩存作用。只有第二個參數依賴項變化了才重新聲明一次。如果依賴傳入空數組，那麼函數第一次創建後就被緩存，這時如果函數定義中的使用了某個狀態值改變了，以後調用函數拿到的還是老的值。如果不傳第二個參數，每次都會重新聲明一次。
const cachedFn = useCallback(fn, dependencies)
和 useMemo 唯一的區別是：useCallback 不會執行第一個參數函數，而是將它返回給你，而 useMemo 會執行第一個參數函數並且將函數執行結果返回給你。所以在前面的例子中，可以返回 handleClick 來達到存儲函數的目的。
所以 useCallback 常用記憶事件函數，生成記憶後的事件函數並傳遞給子組件使用。而 useMemo 更適合經過函數計算得到一個確定的值，比如記憶組件、結果。
5.3 useTransition
useTransition 允許將狀態轉換標記為非阻塞，並允許其他更新中斷它此更新。
5.4 useDeferredValued
useDeferredValue 是一個 React Hook，可以讓你延遲更新 UI 的某些部分。
6. 資源 Hook
use 是一個 React Hook，它可以讓你讀取類似於 Promise 或 context 的資源的值。
7. 其他 Hook
這些 Hook 主要對庫作者有用，而不常用於應用程式代碼。
useDebugValue 允許在 React 開發者工具中為自定義 Hook 添加一個標簽。
useId 允許組件綁定一個唯一 ID，其通常與可訪問性 API 一起使用。
useSyncExternalStore 允許一個組件訂閱一個外部 store。
8. 自定義 Hooks
當我們想在兩個函數之間共用邏輯時，我們會把它提取到第三個函數中。即抽離復用 js 邏輯，讓結構更加清晰，符合函數式編程思想。
必須以 'use' 開頭嗎？必須如此。這個約定非常重要。不遵循的話，由於無法判斷某個函數是否包含對其內部 Hook 的調用，React 將無法自動檢查你的 Hook 是否違反了 Hook 的規則。官網主要研究以下幾個問題：
- 什麼是自定義鉤子，如何編寫自己的鉤子；
- 如何命名和結構化自定義的鉤子；
- 何時以及為什麼要提取自定義鉤子；
- 如何在組件之間重用邏輯；
