Memahami caching pergantungan dan rujukan useCallback dalam React
P粉044526217
2023-08-15 19:29:37
<p>Adakah cangkuk useCallback hanya cache rujukan fungsi atau juga nilai/hasil fungsi itu sendiri? Juga, adakah menggunakan ref dalam tatasusunan kebergantungan sebenarnya mempunyai sebarang kesan, seperti ref komponen? Jika tidak, adakah terdapat cara untuk memastikan perubahan pada nilai rujukan mempunyai kesan yang sesuai? </p>
<p>Saya pada asalnya menyangka bahawa hanya rujukan fungsi akan dicache, tetapi selepas membaca artikel saya mengetahui bahawa useCallback(fn, deps) adalah bersamaan dengan useMemo(() => fn, deps), dan saya tidak pasti jika ini berlaku Ini sebenarnya berlaku. Selain itu, saya cuba menggunakan ref komponen sebagai kebergantungan (seperti Video.js dan react-slick), tetapi saya fikir ia tidak mempunyai banyak kesan berbanding kebergantungan lain. </p>
Ya, tujuan
useCallback
adalah untuk membenarkan fungsi menyimpan rujukannya antara pemaparan melainkan kebergantungan yang anda tentukan berubah.Sebagai contoh, jika anda mempunyai fungsi
f(x,y)=>x+y
, anda boleh menggunakan tatasusunan kebergantungan kosonguseCallback((x,y)=>x+ y,[])
, fungsi ini tidak akan pernah berubah. Ia sentiasa menghasilkan tingkah laku yang konsisten kerana ia hanya menggunakan hujahnya untuk menghuraikan output. Walau bagaimanapun, ia mungkin berubah jika anda mempunyai fungsi lainh
dan nilai luaran lainz
, danh
ditakrifkan sebagaih(x, y)=>x+y+z
, maka anda perlu memasukkanz
dalam kebergantungan supaya jikaz
berubah, Fungsi yang dikembalikan daripadaf(x,y)=>x+y
,你可以使用空的依赖数组useCallback((x,y)=>x+y,[])
,这个函数将永远不会改变。它始终会产生一致的行为,因为它只使用其参数来解析输出。但是,如果你有另一个函数h
和另一个外部值z
,它可能会发生变化,而且h
定义为h(x,y)=>x+y+z
,那么你需要将z
包含在依赖项中,以便如果z
发生变化,从useCallback
akan mempunyai rujukan baru.Jadi penggunaan
kurang berguna dan anda harus menghafal hasilnya secara berasingan.useCallback
的用途通常是当你传递函数时,它不会触发子组件重新渲染,或者当你在子组件的useEffect
声明中使用函数作为依赖项时。如果函数内部的操作很昂贵,那么useCallback
biasanya apabila anda lulus fungsi supaya ia tidak mencetuskan komponen kanak-kanak untuk dipaparkan semula, atau apabila anda menggunakan fungsi sebagai kebergantungan dalam perisytiharanuseEffect
komponen kanak-kanak. Jika operasi di dalam fungsi itu mahal, makaref
的事情,我认为在依赖项中包含ref
并不会有任何作用,它就像数组为空一样。也许如果ref
MengenaiBerikut ialah pautan https://stackblitz.com/edit/stackblitz-starters-wwyw9f?file=src%2FApp.tsx
, yang mempunyai beberapa contoh yang mungkin berguna.