Memahami `useMemo` dan `useCallback`: Panduan Komprehensif

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.

mengapa anda perlu menggunakan useMemo atau useCallback

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.

apa itu useMemo dan cara menggunakannya.

useMemo ialah React hook yang menyimpan cache hasil pengiraan antara pemaparan semula dan memerlukan dua hujah:

• CalculatedValue: Fungsi mengira nilai yang anda mahu cache. Fungsi ini tidak boleh menerima sebarang parameter dan ia mestilah tulen, dan mengembalikan sebarang jenis nilai. React akan mengembalikan hasil yang dikira yang sama jika kebergantungan tidak berubah, Jika tidak, ia akan mengira hasil baharu dan cachenya.
• kebergantungan: senarai semua rujukan nilai reaktif yang terdapat di dalam CalculatedValue anda, daripada nyatakan pemalar pembolehubah dan panggilan fungsi. React akan cuba membandingkan setiap nilai reaktif dengan nilai sebelumnya menggunakan perbandingan Object.it.

useMemo penggunaan

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.

apa itu useCallback dan cara menggunakannya.

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:

• Takrifan Fungsi yang perlu dicache.
• Senarai tanggungan

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]);

Bila hendak menggunakan useMemo berbanding useCallback

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.

Melangkau pemaparan semula komponen

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 }) {
  // ...
});

Kesimpulan

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!