<p>Jadi dikatakan useCallback boleh cache fungsi, saya rasa niatnya adalah untuk membuat kod berjalan lebih cepat. </p> <p>Sebagai contoh, jika saya mempunyai: </p> <pre class="brush:js;toolbar:false;"> setMsg(ev.target.value); }; </pra> <p>Saya juga boleh menukarnya kepada: </p> <pre class="brush:js;toolbar:false;"> const handleChange = useCallback((ev) => { setMsg(ev.target.value); }, []); </pra> <p>Fungsi kini dicache. Walau bagaimanapun, adakah fungsi ini perlu dicipta apabila komponen itu dipaparkan semula? </p> <p>Untuk mengujinya, saya menukarnya kepada IIFE supaya fungsi itu dikeluarkan daripadanya dan ia akan mencetak bahawa fungsi itu sedang dikeluarkan. </p> <p>Lihat: https://codesandbox.io/s/jolly-nightingale-zxqp8k</p> <p>Jadi setiap kali anda menaip sesuatu dalam kotak input, fungsi baharu akan dikeluarkan, seperti yang ditunjukkan dalam konsol. Ini bermakna bahawa IIFE akan dilaksanakan setiap kali, yang juga bermakna bahawa fungsi literal akan ditukar kepada objek fungsi setiap kali, walaupun ia bukan IIFE. Jadi bagaimana kod bantuan ini berjalan lebih pantas? </p>

useEffect(() => {
  // ... 使用handleChange做一些事情
}, [handleChange]);

const Parent = () => {
  const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);
  return <Child handleChange={handleChange}/>
}

const Child = React.memo(({ handleChange }) => {
  // ... 使用handleChange做一些事情
})