Cangkuk `useCallback` lwn `useMemo`

Meningkatkan Prestasi Reaksi: useCallback vs. useMemo Hooks

Penggunaan ReactCallback dan cangkuk useMemo adalah penting untuk mengoptimumkan prestasi dalam aplikasi anda. Memahami masa dan cara menggunakannya boleh menyelamatkan anda daripada pemaparan semula yang tidak perlu dan memastikan apl anda berjalan lancar. Dalam artikel ini, kami akan menyelami contoh dunia sebenar menggunakan useCallback dan useMemo dengan berkesan.

Bila hendak menggunakan useCallback

Kait useCallback mengembalikan versi ingatan fungsi panggil balik, yang bermaksud ia hanya mencipta semula fungsi jika salah satu kebergantungannya berubah. Ini amat berguna apabila menghantar fungsi sebagai prop kepada komponen kanak-kanak untuk mengelakkannya daripada dipaparkan semula secara tidak perlu.

Contoh Masa Nyata: Mencegah Paparan Semula yang Tidak Perlu

Andaikan anda mempunyai komponen induk yang menghantar fungsi kepada komponen anak. Tanpa useCallback, komponen anak akan dipaparkan semula setiap kali komponen induk membuat, walaupun logik fungsi tidak berubah.

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

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

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
};

export default ParentComponent;

Dalam contoh di atas, handleIncrement dihafal dengan useCallback. ChildComponent hanya akan dipaparkan semula apabila kiraan berubah, menghalang pemaparan semula yang tidak perlu dan meningkatkan prestasi.

Bila hendak menggunakan useMemo

Cakuk useMemo digunakan untuk menghafal hasil fungsi, mengira semula hasil cache hanya apabila salah satu kebergantungannya berubah. Ia berguna untuk mengoptimumkan prestasi dalam situasi di mana fungsi melakukan pengiraan yang mahal.

Contoh Masa Nyata: Mengoptimumkan Pengiraan Mahal

Katakan anda mempunyai komponen yang melakukan operasi pengiraan yang mahal, seperti menapis senarai yang besar.

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

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <div>
      <input
        type="text"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="Filter items"
      />
      <ul>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default ExpensiveComponent;

Dalam contoh ini, useMemo digunakan untuk cache hasil penapisan tatasusunan item. Dengan cara ini, operasi penapisan yang mahal hanya dikira semula apabila item atau penapis berubah, mengelakkan pengiraan yang tidak perlu.

Garis Panduan untuk Menggunakan useCallback dan useMemo

• Gunakan useCallback apabila menghantar fungsi kepada komponen anak untuk mengelakkan pemaparan semula yang tidak perlu.
• Gunakan useMemo untuk pengiraan mahal yang tidak perlu dikira semula pada setiap paparan.
• Elakkan menggunakannya secara berlebihan. Memoisasi menambah kerumitan dan kadangkala boleh menjadikan kod lebih sukar dibaca. Hanya gunakannya apabila anda mengenal pasti isu prestasi.
• Ingat tatasusunan kebergantungan. Sentiasa nyatakan kebergantungan dengan tepat; jika tidak, anda mungkin menghadapi pepijat atau tingkah laku yang tidak dijangka.

Kesimpulan

Penggunaan ReactCallback dan cangkuk useMemo ialah alat yang berkuasa untuk mengoptimumkan prestasi komponen dengan mengelakkan pemaparan semula yang tidak perlu dan pengiraan yang mahal. Dengan menggunakan cangkuk ini dengan teliti, anda boleh memastikan aplikasi React anda berjalan dengan cekap.

Atas ialah kandungan terperinci Cangkuk `useCallback` lwn `useMemo`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!