?不數不知道，React已經有22個Hook了
大家好，我卡頌。
5月30日剛好是React10周年紀念日。
我順手拉了下React最新代碼，這一看不要緊，居然已經有22個hook了。
其中：
- react包導出了21個。
- react-dom包導出了1個（useFormStatus）。
本文會從React這些年發展脈絡的角度，聊聊這些hook的作用。
時代的更迭
截止當前，React的發展主要經歷了3個時期：
- CSR時期（客戶端渲染時期）
- 并發時期
- RSC時期（服務端組件時期）
當前的22個hook也都是這3個時期的產物。
CSR時期
時間回到2013年，為了解決facebook日益復雜的交互，「jordwalke」開發了React。經過一段時間摸索，React逐漸形成一套滿足CSR的開發模式。
這套開發模式從ClassComponent遷移到FunctionComponent后，便形成了最初的一批hook。這些hook都與CSR的開發模式相關。比如：
與狀態的流轉相關的：
- useState
- useReducer
- useContext
與處理副作用相關的：
- useEffect
- useLayoutEffect
與提高操作自由度相關的：
- useRef
與性能優化相關的：
- useMemo
- useCallback
與調試相關：
- useDebugValue
隨著React持續迭代，又引入了幾個hook，本質來說他們都是為了完善CSR的開發模式，對現有hook能力進行補充或約束：
- useImperativeHandle（控制useRef防止其失控）
- useEffectEvent（對useEffect能力的補充）
- useInsertionEffect（對useEffect場景的補充）
- useMemoCache[1]（減少性能優化心智負擔）
這里簡單聊聊useMemoCache。長久以來，不管是ClassComponent的shouldComponentUpdate，還是FC中2個性能優化相關hook，都存在比較重的心智負擔，比如：
- 開發者需要考慮是否需要性能優化
- 開發者需要考慮何時使用useMemo、useCallback
為了解決這個問題，在2021年的React Conf，黃玄帶來了「能夠通過編譯器生成等效于useMemo、useCallback代碼」的方案 —— React Forget。
useMemoCache就是React內部為React Forget提供緩存支持的hook。
所以這個hook是給編譯器用的，而不是我們普通開發者。
并發時期
在13年誕生之初，React的作者「jordwalke」就指出 —— React未來會發展「并發特性」。
這并不是什么高瞻遠矚的預言，React本身是個重運行時的框架，這意味著他的迭代方向需要圍繞「運行時」展開。而「并發特性」是一種優秀的運行時性能優化策略。
隨著并發特性落地，首先推出的是2個并發相關hook：
- useTransition
- useDeferredValue
這2個hook的本質都是降低更新的優先級，「更新」意味著「視圖渲染」，所以當更新擁有不同優先級后，這意味著「視圖渲染」擁有不同優先級。
這就是并發更新的理論基礎。
但是，并發更新的出現，打破了React沿襲多年的「一次更新對應一次渲染」的模式。
為了讓現有的庫兼容并發模式，推出了如下hook：
- useMutableSource
- useSyncExternalStore
所以，上述2個hook主要是面向開源庫作者。
RSC時期
RSC（服務端組件）是一個浩大的工程，他的實現不是一蹴而就的，這一點從新出的hook就能看出。
既然是服務端組件，那就涉及到組件在服務端渲染。那么，對于存在唯一標識（比如下面的id props）的組件，如何保證這個唯一標識在服務端與客戶端一致呢？
<SomeCpn id={id}/>如果組件僅在一端渲染，簡單使用Math.random()就能獲得唯一標識：
const id = Math.random();
<SomeCpn id={id}/>但如果這段邏輯在服務端/客戶端都運行一次，顯然id就不唯一了。
為了生成在服務端/客戶端唯一的id，有了：
- useId
在并發時期，由于引入了「渲染優先級」的概念，那勢必存在一些由于優先級不足，而處于pending中的渲染。
如何展示「渲染的pending狀態」呢？React引入了<Suspense>組件。
到了RSC時期，React團隊發現，「渲染的pending狀態」是pending，「數據請求的pending狀態」不也是pending嗎？
換言之，任何需要中間pending狀態的流程，不都可以納入<Suspense>的管理范圍？
那該怎么標記一個流程可以被納入<Suspense>的管理呢？于是有了：
- use
通過這個hook聲明的流程中的pending狀態都會被納入<Suspense>的管理。
既然<Suspense>越來越重要，那我們是不是要針對他做些優化？既然<Suspense>可以在不同視圖之間切換，那為他增加緩存顯然是種不錯的優化方式，于是有了：
- useCacheRefresh[2]（用于建立<Suspense>緩存）
到這一步，RSC的基礎設施算是搭好了，下一步該構建上層應用了。
在瀏覽器端，與RSC理念最契合的便是form標簽，圍繞form標簽的action屬性，React推出了如下hook：
- useOptimistic
- useFormStatus
這2個hook都是為了優化「表單提交」這一場景（也可以說是RSC與客戶端的交互場景）。
關于這2個hook，更詳細的解釋可以參考form 元素是 React 的未來一文。
總結
如果說CSR時期的hook都是面向開發者直接使用的。那么并發時期最初的2個hook（useTransition、useDeferredValue）已經鮮有開發者使用了，而后期類似useMutableSource這樣的hook，普通開發者則根本用不到。
同樣的，再往后的RSC時期的所有hook，普通開發者都用不到。他們都是為其他庫、框架（比如Next.js）提供的。
這標志著React發展方向的不斷變化：
- 早期，定位是前端框架，主要為了解決facebook自身問題，順便開源，受眾是開發者。
- 中期，定位是底層UI庫，受眾是開源庫作者。
- 當前，定位是web底層操作系統，受眾是上層全棧框架。
參考資料
[1]useMemoCache:https://github.com/facebook/react/pull/25123。
[2]useCacheRefresh:https://github.com/reactwg/react-18/discussions/25。
