我們知道，Hooks使用時存在所謂的「閉包陷阱」，考慮如下代碼：
functionChat(){const[text,setText]=useState('');constonClick=useCallback(()=>{sendMessage(text);},[]);return<SendButtononClick={onClick}/>;}我們期望點擊後sendMessage能傳遞text的最新值。
然而實際上，由於回調函數被useCallback緩存，形成閉包，所以點擊的效果始終是sendMessage('')。
這就是「閉包陷阱」。
以上代碼的一種解決方式是「為useCallback增加依賴項」：
constonClick=useCallback(()=>{sendMessage(text);},[text]);但是這麼做了後，每當依賴項（text）變化，useCallback會返回一個全新的onClick引用，這就失去了useCallback「緩存函數引用」的作用。
「閉包陷阱」的出現，加大了Hooks的上手門檻，也讓開發者更容易寫出有bug的代碼。
現在，React官方團隊要出手解決這個問題。
useEvent解決方式是引入一個新的原生Hook —— useEvent。
他用於定義一個函數，這個函數有2個特性：
在組件多次render時保持引用一致
函數內始終能獲取到最新的props與state
上面的例子使用useEvent改造後：
functionChat(){const[text,setText]=useState('');constonClick=useEvent(()=>{sendMessage(text);});return<SendButtononClick={onClick}/>;}在Chat組件多次render時，onClick始終指向同一個引用。
並且onClick觸發時始終能獲取到text的最新值。
之所以叫useEvent，是因為React團隊認為這個Hook的主要應用場景是：「封裝事件處理函數」。
useEvent的實現useEvent的實現並不困難，代碼類似如下：
functionuseEvent(handler){consthandlerRef=useRef(null);//視圖渲染完成後更新`handlerRef.current`指向useLayoutEffect(()=>{handlerRef.current=handler;});//用useCallback包裹，使得render時返回的函數引用一致returnuseCallback((...args)=>{constfn=handlerRef.current;returnfn(...args);},[]);}整體包括兩部分：
很多開源Hooks庫已經實現類似功能（比如ahooks中的useMemoizedFn）
useEvent與這些開源實現的差異主要體現在：
useEvent定位於「處理事件回調函數」這一單一場景，而useMemoizedFn定位於「緩存各種函數」。
那麼問題來了，既然功能類似，那useEvent為什麼要限制自己的使用場景呢？
答案是：為了更穩定。
useEvent能否獲取到最新的state與props取決於handlerRef.current更新的時機。
在上面模擬實現中，useEvent更新handlerRef.current的邏輯放在useLayoutEffect回調中進行。
這就保證了handlerRef.current始終在「視圖完成渲染」後再更新：
useLayoutEffect(()=>{handlerRef.current=handler;});而「事件回調」觸發的時機顯然在「視圖完成渲染」之後，所以能夠穩定獲取到最新的state與props。
註：源碼內的實際更新時機會更早些，但不影響這裡的結論
再來看看ahooks中的useMemoizedFn，fnRef.current的更新時機是「useMemoizedFn執行時」（即「組件render時」）：
functionuseMemoizedFn<Textendsnoop>(fn:T){constfnRef=useRef<T>(fn);//更新fnRef.currentfnRef.current=useMemo(()=>fn,[fn]);//...省略代碼}當React18啟用「並發更新」後，組件render的次數、時機並不確定。
所以useMemoizedFn中fnRef.current的更新時機也是不確定的。
這就增加了在「並發更新」下使用時潛在的風險。
可以說，useEvent通過限制handlerRef.current更新時機，進而限制應用場景，最終達到穩定的目的。
總結useEvent當前還處於RFC（Request For Comments）[1]階段。
很多熱心的開發者對這個Hook的命名提出了建議，比如：useStableCallback：
又比如：useLatestClosure：
從這些命名看，他們顯然擴大了useEvent的應用場景。
經過本文的分析我們知道，「擴大應用場景」意味着「增加開發者使用時出錯的風險」。
參考資料RFC（Request For Comments）: https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
留言列表