建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計,瓊中黎族網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:瓊中黎族等地區(qū)。瓊中黎族做網(wǎng)站價格咨詢:13518219792
我們知道，Hooks使用時存在所謂的「閉包陷阱」，考慮如下代碼：
function Chat() {
const [text, setText] = useState('');
const onClick = useCallback(() => {
sendMessage(text);
}, []);
return
}我們期望點(diǎn)擊后sendMessage能傳遞text的最新值。
然而實(shí)際上，由于回調(diào)函數(shù)被useCallback緩存，形成閉包，所以點(diǎn)擊的效果始終是sendMessage('')。
這就是「閉包陷阱」。
以上代碼的一種解決方式是「為useCallback增加依賴項(xiàng)」：
const onClick = useCallback(() => {
sendMessage(text);
}, [text]);但是這么做了后，每當(dāng)依賴項(xiàng)(text)變化，useCallback會返回一個全新的onClick引用，這就失去了useCallback「緩存函數(shù)引用」的作用。
「閉包陷阱」的出現(xiàn)，加大了Hooks的上手門檻，也讓開發(fā)者更容易寫出有bug的代碼。
現(xiàn)在，React官方團(tuán)隊要出手解決這個問題。
useEvent
解決方式是引入一個新的原生Hook —— useEvent。
他用于定義一個函數(shù)，這個函數(shù)有2個特性：
- 在組件多次render時保持引用一致。
- 函數(shù)內(nèi)始終能獲取到最新的props與state。
上面的例子使用useEvent改造后：
function Chat() {
const [text, setText] = useState('');
const onClick = useEvent(() => {
sendMessage(text);
});
return
}在Chat組件多次render時，onClick始終指向同一個引用。
并且onClick觸發(fā)時始終能獲取到text的最新值。
之所以叫useEvent，是因?yàn)镽eact團(tuán)隊認(rèn)為這個Hook的主要應(yīng)用場景是：「封裝事件處理函數(shù)」。
useEvent的實(shí)現(xiàn)
useEvent的實(shí)現(xiàn)并不困難，代碼類似如下：
function useEvent(handler) {
const handlerRef = useRef(null);
// 視圖渲染完成后更新`handlerRef.current`指向
useLayoutEffect(() => {
handlerRef.current = handler;
});
// 用useCallback包裹，使得render時返回的函數(shù)引用一致
return useCallback((...args) => {
const fn = handlerRef.current;
return fn(...args);
}, []);
}整體包括兩部分：
返回一個沒有依賴項(xiàng)的useCallback，使得每次render時函數(shù)的引用一致。
useCallback((...args) => {
const fn = handlerRef.current;
return fn(...args);
}, []);在合適的時機(jī)更新handlerRef.current，使得實(shí)際執(zhí)行的函數(shù)始終是最新的引用。
與開源Hooks的差異
很多開源Hooks庫已經(jīng)實(shí)現(xiàn)類似功能(比如ahooks中的useMemoizedFn)。
useEvent與這些開源實(shí)現(xiàn)的差異主要體現(xiàn)在：
useEvent定位于「處理事件回調(diào)函數(shù)」這一單一場景，而useMemoizedFn定位于「緩存各種函數(shù)」。
那么問題來了，既然功能類似，那useEvent為什么要限制自己的使用場景呢?
答案是：為了更穩(wěn)定。
useEvent能否獲取到最新的state與props取決于handlerRef.current更新的時機(jī)。
在上面模擬實(shí)現(xiàn)中，useEvent更新handlerRef.current的邏輯放在useLayoutEffect回調(diào)中進(jìn)行。
這就保證了handlerRef.current始終在「視圖完成渲染」后再更新：
useLayoutEffect(() => {
handlerRef.current = handler;
});而「事件回調(diào)」觸發(fā)的時機(jī)顯然在「視圖完成渲染」之后，所以能夠穩(wěn)定獲取到最新的state與props。
注：源碼內(nèi)的實(shí)際更新時機(jī)會更早些，但不影響這里的結(jié)論。
再來看看ahooks中的useMemoizedFn，fnRef.current的更新時機(jī)是「useMemoizedFn執(zhí)行時」(即「組件render時」)：
function useMemoizedFn(fn: T) {
const fnRef = useRef(fn);
// 更新fnRef.current
fnRef.current = useMemo(() => fn, [fn]);
// ...省略代碼
}
當(dāng)React18啟用「并發(fā)更新」后，組件render的次數(shù)、時機(jī)并不確定。
所以useMemoizedFn中fnRef.current的更新時機(jī)也是不確定的。
這就增加了在「并發(fā)更新」下使用時潛在的風(fēng)險。
可以說，useEvent通過限制handlerRef.current更新時機(jī)，進(jìn)而限制應(yīng)用場景，最終達(dá)到穩(wěn)定的目的。
總結(jié)
useEvent當(dāng)前還處于RFC(Request For Comments)[1]階段。
很多熱心的開發(fā)者對這個Hook的命名提出了建議，比如：useStableCallback：
又比如：useLatestClosure：
從這些命名看，他們顯然擴(kuò)大了useEvent的應(yīng)用場景。
經(jīng)過本文的分析我們知道，「擴(kuò)大應(yīng)用場景」意味著「增加開發(fā)者使用時出錯的風(fēng)險」。
參考資料
[1]RFC(Request For Comments):
https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md。
網(wǎng)頁題目：React官方團(tuán)隊出手，補(bǔ)齊原生Hook短板
URL鏈接：http://www.dlmjj.cn/article/dhipcsj.html
