當不將回呼傳遞給子組件并僅在當前組件上使用它時，將回呼包裝在useCallback. 這個：
const Foo = (
const [count, setCount] = useState(500);
const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setCount(Number(e.target.value));
}, [setCount]);
return (
<>
<div>
Delay: <input value={count} onChange={onChange} type="number" />
</div>
</>
);
詩句：
const Foo = (
const [count, setCount] = useState(500);
const onChange =(e: React.ChangeEvent<HTMLInputElement>) => {
setCount(Number(e.target.value));
};
return (
<>
<div>
Delay: <input value={count} onChange={onChange} type="number" />
</div>
</>
);
Codesandbox：https ://codesandbox.io/s/loving-stonebraker-48xhs ? file =/ src/Counter.tsx
uj5u.com熱心網友回復：
我認為在內部使用時沒有任何好處，因為每個狀態更新 ( setCount(Number(e.target.value));) 無論如何都必須重新渲染組件，并且所有回呼所做的都是將狀態更新排入佇列。
如果在組件的生命周期內使用單個宣告的、記憶化的函式，則記憶體使用可能會有很小的（非常微不足道的）改進。
如果在useEffect鉤子中使用回呼，它可以作為穩定參考提供并從依賴陣列中洗掉，但通常在這里您只需將函式移動到效果回呼中。這不適合您所詢問的用例，但它是一個有效的用例，不會將回呼傳遞給孩子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359059.html
標籤：javascript 反应