useMemo dan useCallback ialah dua cangkuk React yang berkuasa yang memainkan peranan penting dalam menghalang pemaparan semula yang tidak diperlukan yang menghasilkan pengoptimuman prestasi komponen. Ia adalah alat penting untuk pembangun untuk mencipta aplikasi React yang responsif dan cekap.
Dalam panduan ini akan menyelami penjelasan useMemo dan useCallback apakah persamaan mereka dan bagaimana ia berbeza antara satu sama lain. Kami akan memahami cara melaksanakannya, Bila hendak menggunakan setiap satu.
Biasanya dalam React kebanyakan pengiraan adalah pantas, Tetapi kadangkala anda mempunyai pengiraan pada tatasusunan yang sangat besar, atau beberapa pengiraan mahal yang tidak perlu dilaksanakan pada setiap pemaparan semula.
useMemo dan useCallback cangkuk boleh membantu menyelesaikan isu ini dengan menyimpan cache pengiraan mahal itu antara pemaparan semula.
useMemo ialah React hook yang menyimpan cache hasil pengiraan antara pemaparan semula dan memerlukan dua hujah:
Untuk cache pengiraan antara pemaparan semula, bungkusnya dengan cangkuk useMemo di peringkat atas komponen.
useMemo(fn, dependencies)
const App = () => { const useMemo(() => { filterTodo(todos, tab) }, [todos, tab]) return(...) } export default App
Perhatikan bahawa parameter pertama useMemo ialah fungsi tanpa parameter.
React kali pertama akan mengira nilai hasil parameter pertama useMemo, Kemudian menghafal parameter kedua iaitu senarai kebergantungan. React akan cache hasil yang dikira antara pemaparan semula dan hanya mengira semula hasilnya apabila salah satu nilai kebergantungan berubah.
cauk useCallback adalah sama seperti cangkuk useMemo dengan satu-satunya cangkuk yang berbeza ialah cangkuk ini akan cache fungsi (paramter pertama untuk useCallback) tanpa mengira nilai. Fungsi ini juga boleh menerima parameter tidak seperti dalam useMemo.
Untuk menggunakan useCallback anda perlu lulus parameter:
const cachedFn = useCallback(fn, dependencies)
import { useCallback } from 'react'; export default function ProductPage({ productId }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]);
Jika anda terutamanya bimbang dengan mengoptimumkan hasil pengiraan, gunakan useMemo.
Jika anda terutamanya bimbang dengan menghalang pemaparan semula yang tidak perlu disebabkan oleh perubahan fungsi, gunakan useCallback.
Kadangkala anda akan mempunyai komponen induk yang perlu dipamerkan semula yang akan mengakibatkan pemaparan semula komponen anak juga. Anda boleh membuat cache komponen menggunakan memo.
Mari andaikan kita mempunyai komponen Todolist dengan keadaan tema dan komponen Senarai sebagai anak. Apabila keadaan tema mengubah paparan Komponen Senarai yang tidak diperlukan. untuk menyelesaikan isu ini gunakan memo.
kami membalut komponen berfungsi Senarai dengan memo.
export default function TodoList({ todos, tab, theme }) { // ... return ( <div className={theme}> <List items={visibleTodos} /> </div> ); }
import { memo } from 'react'; const List = memo(function List({ items }) { // ... });
Dalam panduan komprehensif ini, kami telah memahami useMemo dan gunakan cangkuk Panggilan balik, Cara menggunakan setiap satu daripadanya, Bila hendak menggunakan setiap satu daripadanya, Dan menerangkan faedahnya untuk mengoptimumkan prestasi aplikasi React.
Atas ialah kandungan terperinci Memahami `useMemo` dan `useCallback`: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!