我正在構建一個接受一個函式的自定義鉤子。如果該函式在重新渲染/更新之間不會改變，那么我應該在哪里對該函式進行備忘？
選項 1
const useCustomHook=（callback）=> {
const callbackRef = useRef();
callbackRef.current = callback;
//沒有效果，每次呼叫這個鉤子時都會重新創建。
//因為一個新的回呼實體正在被傳遞。
const callbackWrapper = useCallback(() => {
if (callbackRef.current) {
callbackRef.current（）。
}
}, [callbackRef])。
//使用 callbackWrapper。
}
const Component = (/span>) => {
///每次這個組件重新渲染時，將創建新的傳入回呼實體。
useCustomHook(() => {
console.log(`I'm being passed to the hook`)。
});
//span> ...
// .../span>
return <div></;
}
選項2
const useCustomHook=（callback）=> {
//Callback已經被記憶了。
const callbackRef = useRef();
callbackRef.current = callback;
// use callbackRef.
}
const Component = (/span>) => {
// Memoized function passed, but.
//1.這是允許的嗎？ 2.
//2.需要鉤子的用戶付出更多的努力。
useCustomHook(useCallback(() => {
console.log(`I'm being passed to the hook`)。
}, []));
// ...
// .../span>
return <div></;
}
選項2似乎更有效，但它要求自定義鉤子的用戶首先將他們的函式包含在一個useCallback()鉤子中。是否有另一種方法，用戶不需要在useCallback()中包含傳遞的函式？
uj5u.com熱心網友回復：
我可能會使用useEffect鉤子來 "記憶"callback到React ref。
const useCustomHook=（callback）=> {
const callbackRef = useRef();
useEffect(() => {
//僅在回呼更新時更新保存在ref中的回呼。
callbackRef.current = callback。
}, [callback])。
//提供穩定的回呼，總是呼叫最新的。
//提供穩定的回呼，總是呼叫最新的 //回呼存盤在ref。
const callbackWrapper = useCallback(() => {
if (callbackRef.current) {
callbackRef.current（）。
}
}, []);
//使用 callbackWrapper。
}
或者直接使用useMemo或useCallback，但在這一點上，你基本上只是在你的自定義鉤子中重新定義了useMemo或useCallback。在這種情況下，傳遞一個額外的依賴陣列引數。
const useCustomHook=（callback, deps）=> {
const callbackWrapper = useMemo(() => callback, deps);
//使用callbackWrapper。
}
既然如此，你很可能希望養成在傳遞回呼之前對其進行備忘的習慣，以保證提供穩定的參考。這樣一來，你就不需要再為你的自定義鉤子的怪異之處費神了。
uj5u.com熱心網友回復：
另一種方法是在組件主體之外宣告回呼（但我不推薦這樣做，它可能會產生一些邊緣情況）
function cb ( ) {
console.log(`I'm being passed to the hook`)。
}
const Component = (/span>) => {
useCustomHook（cb）。
// .../span>
// .../span>
return <div></;
}
在你想要的頂層組件主體上模擬出函式，然后像這樣把它傳遞給你的自定義鉤子：
const Component=（）=> {
//hooks應該在頂層函式體上呼叫。
const cb = useCallback(() => {
console.log(`I'm being passed to the hook`)。
}, []);
useCustomHook（cb）。
// ...
// .../span>
return <div></;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/332284.html
標籤：