Memahami React's useMemo: Apa Ia Berfungsi, Bila Untuk Menggunakannya dan Amalan Terbaik

React ialah perpustakaan yang berkuasa untuk membina antara muka pengguna, tetapi apabila aplikasi anda berkembang, anda mungkin menyedari bahawa prestasi kadangkala boleh menjadi isu. Di sinilah cangkuk React seperti useMemo dimainkan. Dalam artikel ini, kami akan menyelami perkara yang dilakukan useMemo, apabila ia berguna dan amalan terbaik untuk menggunakannya. Kami juga akan membincangkan beberapa perangkap biasa untuk dielakkan.

Apakah useMemo?

useMemo ialah cangkuk React yang membolehkan anda menghafal hasil pengiraan. Secara ringkas, ia mengingati hasil fungsi dan hanya mengiranya semula apabila kebergantungannya berubah. Ini boleh mengelakkan pengiraan yang tidak perlu dan meningkatkan prestasi.

Berikut ialah contoh asas:

import React, { useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => {
    console.log('Calculating...');
    return num * 2;
  }, [num]);

  return <div>The result is {result}</div>;
}

Dalam contoh ini, fungsi di dalam useMemo hanya berjalan apabila num berubah. Jika num kekal sama, React akan melangkau pengiraan dan menggunakan hasil yang telah dihafal sebelum ini.

Mengapa Gunakan useMemo?

Sebab utama untuk menggunakan useMemo adalah untuk mengoptimumkan prestasi. Dalam React, komponen dipaparkan semula apabila keadaan atau prop mereka berubah. Ini boleh menyebabkan pengiraan mahal dijalankan lebih kerap daripada yang diperlukan, terutamanya jika pengiraan rumit atau pokok komponennya besar.

Berikut ialah beberapa senario di mana useMemo amat berguna:

1. Pengiraan Mahal:

Bayangkan anda mempunyai komponen yang melakukan pengiraan yang berat, seperti menapis set data yang besar. Tanpa useMemo, pengiraan ini akan dijalankan pada setiap pemaparan, yang boleh melambatkan aplikasi anda.

import React, { useMemo } from 'react';

function ExpensiveCalculationComponent({ numbers }) {
  // Expensive calculation: filtering even numbers
  const evenNumbers = useMemo(() => {
    console.log('Filtering even numbers...');
    return numbers.filter(num => num % 2 === 0);
  }, [numbers]);

  return (
    <div>
      <h2>Even Numbers</h2>
      <ul>
        {evenNumbers.map((num) => (
          <li key={num}>{num}</li>
        ))}
      </ul>
    </div>
  );
}

// Usage
const numbersArray = Array.from({ length: 100000 }, (_, i) => i + 1);
export default function App() {
  return <ExpensiveCalculationComponent numbers={numbersArray} />;
}

Dalam contoh ini, operasi penapisan adalah mahal dari segi pengiraan. Dengan membungkusnya dalam useMemo, ia hanya berjalan apabila tatasusunan nombor berubah, bukannya pada setiap paparan.

2. Mengelakkan Mencipta Semula Objek atau Tatasusunan

Mengirim tatasusunan atau objek baharu sebagai prop kepada komponen anak pada setiap pemaparan boleh menyebabkan pemaparan semula yang tidak perlu, walaupun kandungannya tidak berubah. useMemo boleh digunakan untuk menghafal tatasusunan atau objek.

import React, { useMemo } from 'react';

function ChildComponent({ items }) {
  console.log('Child component re-rendered');
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default function ParentComponent() {
  const items = useMemo(() => ['apple', 'banana', 'cherry'], []);

  return (
    <div>
      <h2>Fruit List</h2>
      <ChildComponent items={items} />
    </div>
  );
}

Di sini, tatasusunan item dihafal menggunakan useMemo, memastikan ChildComponent hanya memaparkan semula apabila perlu. Tanpa useMemo, tatasusunan baharu akan dibuat pada setiap pemaparan, menyebabkan pemaparan semula komponen anak yang tidak perlu.

3. Mengoptimumkan Pokok Komponen Besar

Apabila bekerja dengan pokok komponen yang besar, menggunakan useMemo boleh membantu mengurangkan pemaparan semula yang tidak perlu, terutamanya untuk operasi yang mahal dalam komponen bersarang dalam.

import React, { useMemo } from 'react';

function LargeComponentTree({ data }) {
  const processedData = useMemo(() => {
    console.log('Processing data for large component tree...');
    return data.map(item => ({ ...item, processed: true }));
  }, [data]);

  return (
    <div>
      <h2>Processed Data</h2>
      {processedData.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}

// Usage
const largeDataSet = Array.from({ length: 1000 }, (_, i) => ({ name: `Item ${i + 1}` }));
export default function App() {
  return <LargeComponentTree data={largeDataSet} />;
}

Dalam contoh ini, useMemo digunakan untuk memproses set data yang besar sebelum memaparkannya dalam komponen. Dengan menghafal data yang diproses, komponen hanya mengira semula data apabila prop data asal berubah, mengelakkan pemprosesan semula yang tidak perlu dan meningkatkan prestasi.

Amalan Terbaik untuk menggunakanMemo

Walaupun useMemo ialah alat yang berkuasa, adalah penting untuk menggunakannya dengan betul. Berikut ialah beberapa amalan terbaik:

1. Gunakannya untuk Pengoptimuman Prestasi: Pengiraan mahal adalah contoh yang baik tentang masa untuk menggunakan useMemo. Ia melakukan operasi yang berpotensi mahal (menjumlahkan tatasusunan dan mendarabkan hasilnya) yang bergantung pada nombor dan pembolehubah keadaan pengganda.

const expensiveCalculation = useMemo(() => {
  console.log('Calculating sum...');
  return numbers.reduce((acc, num) => acc + num, 0) * multiplier;
}, [numbers, multiplier]);

Pengiraan ini hanya akan dijalankan semula apabila nombor atau pengganda berubah, berpotensi menjimatkan pengiraan semula yang tidak perlu pada pemaparan semula yang lain.

1. Pastikan Ketergantungan Tepat: Perhatikan bagaimana cangkuk useMemo untuk pengiraan mahal merangkumi kedua-dua nombor dan pengganda dalam tatasusunan kebergantungannya. Ini memastikan bahawa pengiraan dijalankan semula apabila salah satu daripada nilai ini berubah.

}, [numbers, multiplier]);  // Correct dependencies

Jika kami telah meninggalkan pengganda daripada kebergantungan, pengiraan tidak akan dikemas kini apabila pengganda berubah, yang membawa kepada hasil yang salah.

1. Jangan Terlalu Guna menggunakanMemo: Contoh simpleValue menunjukkan penggunaan useMemo yang tidak perlu:

const simpleValue = useMemo(() => {
  return 42;  // This is not a complex calculation
}, []);  // Empty dependencies array

Penghafalan ini tidak diperlukan kerana nilainya tetap dan pengiraan adalah remeh. Ia menambahkan kerumitan tanpa sebarang faedah prestasi.

1. Fahami Bila Tidak Menggunakannya: Fungsi handleClick ialah contoh yang baik apabila tidak menggunakan useMemo:

const handleClick = () => {
  console.log('Button clicked');
};

Fungsi ini mudah dan tidak melibatkan sebarang pengiraan yang berat. Menghafalnya akan menambah kerumitan yang tidak perlu pada kod tanpa memberikan sebarang peningkatan prestasi yang ketara.

Dengan mengikuti amalan terbaik ini, anda boleh menggunakan useMemo dengan berkesan untuk mengoptimumkan komponen React anda tanpa terlalu merumitkan kod anda atau memperkenalkan potensi pepijat daripada pengurusan pergantungan yang salah.

Perangkap Biasa yang Perlu Dielakkan

Walaupun useMemo boleh menjadi alat yang hebat, terdapat beberapa kesilapan biasa yang perlu diperhatikan:

1. Mengabaikan Ketergantungan: Jika anda terlupa memasukkan kebergantungan dalam tatasusunan, nilai yang dihafal mungkin menjadi basi, yang membawa kepada pepijat. Sentiasa semak semula bahawa semua pembolehubah yang digunakan di dalam fungsi yang dihafal disertakan dalam tatasusunan kebergantungan.

2. Menggunakan useMemo Everywhere: Tidak semua fungsi atau nilai perlu dihafal. Jika kod anda tidak mempunyai masalah prestasi, menambah useMemo tidak akan memperbaiki keadaan. Malah, ia boleh melambatkan sedikit disebabkan oleh penghafalan yang berlebihan.

3. Salah Faham Re-Render: useMemo hanya mengoptimumkan pengiraan yang dihafal, bukan keseluruhan proses pemaparan komponen. Jika komponen masih menerima prop atau keadaan baharu, ia akan dipaparkan semula, walaupun nilai yang dihafal tidak berubah.

Kesimpulan

useMemo ialah cangkuk yang berkuasa untuk mengoptimumkan prestasi dalam aplikasi React, tetapi ia harus digunakan dengan bijak. Fokus pada menggunakannya apabila terdapat kesesakan prestasi sebenar, dan sentiasa pastikan bahawa kebergantungan anda adalah betul. Dengan mengikuti amalan terbaik ini, anda boleh mengelakkan perangkap biasa dan memanfaatkan sepenuhnya penggunaanMemo dalam projek anda.

Atas ialah kandungan terperinci Memahami React's useMemo: Apa Ia Berfungsi, Bila Untuk Menggunakannya dan Amalan Terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!