Bagaimanakah kod bantuan useCallback berjalan lebih pantas?

Question

Jadi dikatakan useCallback boleh cache fungsi, saya rasa niatnya adalah untuk membuat kod berjalan lebih cepat.

Sebagai contoh, jika saya mempunyai:

    setMsg(ev.target.value);
  };

Saya juga boleh menukarnya kepada: 
 const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);

Fungsi kini dicache. Walau bagaimanapun, adakah fungsi ini perlu dicipta apabila komponen itu dipaparkan semula? 
Untuk mengujinya, saya menukarnya kepada IIFE supaya fungsi itu dikeluarkan daripadanya dan ia akan mencetak bahawa fungsi itu sedang dikeluarkan. 
Lihat:
https://codesandbox.io/s/jolly-nightingale-zxqp8k
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? 
            

Answer 1

Ya, itu betul. Setiap render mencipta fungsi baharu, yang kemudiannya digantikan dengan fungsi cache.

Percepatan bukan kerana melangkau langkah mencipta fungsi, tetapi kerana kod lain dapat melangkau kerja mereka sendiri. Ini kerana jika mereka lulus fungsi yang sama setiap kali, mereka tahu bahawa tiada apa yang relevan telah berubah.

Sebagai contoh, jika anda perlu memasukkan handleChange传递给useEffect dalam tatasusunan kebergantungan, adalah penting untuk menghantar rujukan yang stabil setiap kali, jika tidak, kesannya akan dijalankan semula pada setiap paparan:

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

Atau jika handleChange作为prop传递给一个组件，并且该组件想要使用React.memo langkau pemaparan. Rendering boleh dilangkau hanya apabila prop tidak berubah:

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

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