React : useCallback vs useMemo

Ini kedua-dua cangkuk pengoptimuman dalam React, tetapi ia mempunyai tujuan yang sedikit berbeza.

Jom pecahkan:

1. Tujuan:

• useCallback digunakan untuk menghafal fungsi.
• useMemo digunakan untuk menghafal nilai.

2. Perkara yang mereka pulangkan:

• useCallback mengembalikan fungsi panggil balik yang diingati.
• useMemo mengembalikan nilai memo dalam apa jua jenis.

3. Kes penggunaan:

• useCallback biasanya digunakan apabila menghantar panggilan balik kepada komponen anak yang dioptimumkan yang bergantung pada kesamaan rujukan untuk mengelakkan pemaparan yang tidak perlu.
• useMemo digunakan untuk mengelakkan pengiraan mahal pada setiap paparan.

4. Sintaks:

   const memoizedCallback = useCallback(
     () => {
       doSomething(a, b);
     },
     [a, b],
   );

   const memoizedValue = useMemo(
     () => computeExpensiveValue(a, b),
     [a, b]
   );

5. Implikasi prestasi:

• useCallback boleh membantu menghalang pemaparan semula komponen anak yang tidak perlu yang menerima panggilan balik sebagai prop.
• useMemo boleh membantu mengelakkan pengiraan semula yang mahal apabila kebergantungan tidak berubah.

Mari kita lihat beberapa contoh untuk menggambarkan perbezaan:

Contoh menggunakan useCallback:

import React, { useState, useCallback } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Increment</button>;
});

Dalam contoh ini, useCallback digunakan untuk menghafal fungsi handleClick. Ini berguna kerana ChildComponent dibalut dengan React.memo, yang bermaksud ia hanya akan dipaparkan semula jika propnya berubah. Dengan menggunakan useCallback, kami memastikan bahawa handleClick mengekalkan rujukan yang sama antara pemaparan (melainkan kiraan berubah), menghalang pemaparan semula ChildComponent yang tidak perlu.

Contoh menggunakan useMemo:

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ list }) => {
  const sortedList = useMemo(() => {
    console.log('Sorting list');
    return [...list].sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      <h2>Sorted List:</h2>
      {sortedList.map(item => <div key={item}>{item}</div>)}
    </div>
  );
};

const ParentComponent = () => {
  const [list] = useState([3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]);
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComponent list={list} />
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
};

Dalam contoh ini, useMemo digunakan untuk menghafal senarai yang diisih. Operasi pengisihan yang mahal hanya akan dilakukan apabila prop senarai berubah, bukan pada setiap paparan ExpensiveComponent. Ini amat berguna di sini kerana ParentComponent mungkin memaparkan semula atas sebab yang tidak berkaitan dengan senarai (seperti apabila kiraan berubah), dan kami tidak mahu menyusun semula senarai tanpa perlu.

Pengambilan Utama:

1. Gunakan useCallback apabila anda ingin menghalang pemaparan semula yang tidak perlu bagi komponen anak yang bergantung pada rujukan fungsi.
2. Gunakan useMemo apabila anda ingin mengelakkan pengiraan semula nilai yang mahal.
3. Kedua-dua cangkuk membantu dengan pengoptimuman prestasi, tetapi ia harus digunakan dengan bijak. Penggunaan berlebihan boleh membawa kepada peningkatan kerumitan tanpa peningkatan prestasi yang ketara.
4. Susun atur kebergantungan dalam kedua-dua cangkuk adalah penting. Nilai/fungsi yang dihafal hanya akan dikemas kini jika salah satu kebergantungan berubah.

ikuti untuk lebih banyak kandungan seperti ini!

Atas ialah kandungan terperinci React : useCallback vs useMemo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!