Lembaran Cheat Memoisasi React

React menyediakan tiga alat utama untuk menghafal bagi mengoptimumkan prestasi komponen dengan meminimumkan pemaparan semula dan pengiraan semula yang tidak perlu:

1. useMemo – Menghafal Nilai Dikira

• Tujuan: Menyimpan hasil pengiraan, hanya mengira semula jika kebergantungan berubah.

• Penggunaan: Gunakan untuk pengiraan mahal atau data terbitan yang sepatutnya hanya dikemas kini dengan kebergantungan tertentu.
  

  const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
  
  

  Salin selepas log masuk

• Amalan Terbaik:

  • Sertakan semua kebergantungan yang digunakan dalam fungsi dalam tatasusunan kebergantungan.
  • Elakkan membuat rujukan baharu (tatasusunan, objek) atau fungsi sebaris dalam useMemo.
  • Nota: Jangan gunakan useMemo untuk fungsi; ia menyimpan nilai, bukan rujukan fungsi.

2. useCallback – Rujukan Fungsi Memoize

• Tujuan: Menyimpan rujukan fungsi, menghalang penciptaan semula pada setiap paparan.

• Penggunaan: Gunakan untuk rujukan fungsi yang stabil, terutamanya untuk panggilan balik (cth., pengendali acara) yang dihantar kepada komponen anak.
  

  const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
  
  

  Salin selepas log masuk

• Amalan Terbaik:

  • Sertakan semua kebergantungan yang digunakan dalam fungsi dalam tatasusunan kebergantungan untuk mengelakkan nilai lapuk.
  • Elakkan mengisytiharkan fungsi sebaris dalam useCallback, kerana ini boleh memecahkan hafalan.
  • Nota: Gunakan useCallback untuk fungsi sahaja. Penyalahgunaan useCallback untuk nilai mengakibatkan kod tidak cekap dengan panggilan fungsi yang tidak diperlukan.

3. React.memo – Hafalkan Keseluruhan Komponen

• Tujuan: Menghalang komponen berfungsi daripada dipaparkan semula jika propnya tidak berubah.

• Penggunaan: Gunakan untuk mengoptimumkan komponen anak yang tidak perlu dipaparkan semula apabila induk berubah.
  

  const MemoizedComponent = React.memo(ChildComponent);
  
  

  Salin selepas log masuk

• Amalan Terbaik:

  • Gunakan dengan komponen yang menerima prop atau prop stabil yang jarang berubah.
  • Elakkan perubahan kerap dalam prop (seperti objek/tatasusunan baharu) untuk memaksimumkan keberkesanan React.memo.
  • Nota: Berfungsi dengan baik dengan fungsi useCallbackmemoized untuk mengekalkan prop stabil yang dihantar kepada komponen anak.

Perkara Utama yang Perlu Diingati

• Gunakan useMemo untuk nilai dan gunakan Panggilan balik untuk fungsi.
  • Menggunakan useMemo untuk fungsi menghasilkan pelaksanaan serta-merta, bukan rujukan fungsi yang stabil.
  • Menggunakan useCallback untuk nilai mengembalikan fungsi, yang membawa kepada kod tidak cekap dengan panggilan fungsi tambahan.
• Ringkasan Menghafal:
  • useMemo: Cache nilai yang dikira (nilai pulangan fungsi).
  • gunakan Panggilan Balik: Cache rujukan fungsi (panggilan balik).
  • React.memo: Cache keseluruhan komponen berdasarkan prop untuk menghalang pemaparan semula daripada kemas kini induk.
• Gunakan Memoisasi secara Selektif: Memoisasi meningkatkan prestasi apabila digunakan dengan betul tetapi boleh menambah kerumitan jika digunakan secara berlebihan atau disalahgunakan.

Atas ialah kandungan terperinci Lembaran Cheat Memoisasi React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!