Mengoptimumkan Prestasi dengan penggunaan ReactMemo Hook: Menghafal Pengiraan Mahal

gunakanMemo Hook dalam React

Cangkuk useMemo ialah cangkuk React terbina dalam yang membantu mengoptimumkan prestasi aplikasi anda dengan menghafal pengiraan mahal. Ia memastikan bahawa pengiraan tertentu hanya dilaksanakan semula apabila kebergantungan mereka berubah, bukannya pada setiap pemaparan. Ini amat berguna untuk mengelakkan pengiraan semula nilai yang tidak perlu apabila komponen dipaparkan semula.

---

Apakah useMemo?

useMemo digunakan untuk menghafal hasil panggilan fungsi yang mahal dan mengiranya semula hanya apabila salah satu kebergantungannya telah berubah. Ini boleh meningkatkan prestasi dengan mengelakkan pengiraan semula yang mahal pada setiap paparan.

---

Sintaks penggunaanMemo

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• Fungsi mahal(param1, param2): Fungsi yang melakukan pengiraan mahal.
• memoizedValue: Hasil daripada Fungsi mahal, yang akan dikira semula hanya apabila kebergantungan berubah.
• [param1, param2]: Tatasusunan kebergantungan. Nilai yang dihafal hanya akan dikira semula jika salah satu nilai ini berubah.

---

Cara penggunaanMemo Berfungsi

1. Memoisasi: Cangkuk useMemo menyimpan hasil pengiraan dan mengembalikan hasil yang disimpan jika kebergantungan tidak berubah sejak pemaparan terakhir.
2. Pengiraan Semula: Jika mana-mana kebergantungan berubah, pengiraan akan dilaksanakan semula dan hasil baharu akan dikembalikan.

---

Contoh penggunaanMemo Hook

Mari kita pertimbangkan contoh mudah di mana kita mempunyai pengiraan yang perlahan:

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

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2 id="Expensive-Calculation-memoizedValue">Expensive Calculation: {memoizedValue}</h2>
      <button onclick="{()"> setCount(count + 1)}>Increment Count</button>
      <button onclick="{()"> setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

• Penjelasan:

  • useMemo digunakan untuk menghafal hasil countExpensiveValue(count).
  • Fungsi calculateExpensiveValue hanya dilaksanakan semula apabila kiraan berubah. Apabila keadaan togol berubah, nilai memoized tidak dikira semula kerana togol bukan sebahagian daripada tatasusunan kebergantungan.

• Mengapa menggunakan useMemo di sini?

  • Tanpa useMemo, fungsi mahal calculateExpensiveValue akan dipanggil pada setiap pemaparan, walaupun apabila keadaan togol berubah dan tidak menjejaskan pengiraan. Menggunakan useMemo memastikan pengiraan mahal hanya dilakukan apabila perlu.

---

Bila Gunakan useMemo

Anda harus menggunakan useMemo apabila:

1. Pengiraan Mahal: Apabila anda mempunyai fungsi atau operasi yang mahal untuk dijalankan dan anda ingin mengelak daripada mengira semula kecuali sangat perlu (cth., menyusun tatasusunan yang besar atau pengiraan kompleks).

2. Elakkan pemaparan semula yang tidak perlu: Menghafal nilai yang dihantar kepada komponen kanak-kanak boleh menghalang pemaparan semula komponen kanak-kanak yang tidak perlu. Jika nilai yang dihafal tidak berubah, React boleh melangkau pemaparan komponen anak.

3. Mengoptimumkan Prestasi: Jika bahagian logik tertentu melibatkan pengiraan yang hanya bergantung pada prop atau keadaan tertentu, useMemo boleh memastikan fungsi berjalan hanya apabila kebergantungannya berubah, sekali gus mengoptimumkan prestasi.

---

Kes Penggunaan Biasa untuk useMemo

1. Pengiraan Mahal

Sebagai contoh, bayangkan anda memaparkan senarai item yang memerlukan pengisihan atau penapisan dan operasi ini mahal.

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• Penjelasan: Di sini, operasi penapis hanya akan dijalankan apabila tatasusunan data berubah, menghalang pemaparan semula atau pengiraan yang tidak perlu apabila nilai keadaan lain berubah.

1. Memoizing Komponen Komponen Kanak-kanak

Jika anda mempunyai komponen anak yang menerima prop yang terhasil daripada pengiraan yang mahal, anda boleh menghafal pengiraan dan lulus hasilnya sebagai prop.

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

const ExpensiveComponent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  const calculateExpensiveValue = (num) => {
    console.log('Calculating expensive value...');
    return num * 2;
  };

  // Memoizing the expensive function result
  const memoizedValue = useMemo(() => calculateExpensiveValue(count), [count]);

  return (
    <div>
      <h2 id="Expensive-Calculation-memoizedValue">Expensive Calculation: {memoizedValue}</h2>
      <button onclick="{()"> setCount(count + 1)}>Increment Count</button>
      <button onclick="{()"> setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

export default ExpensiveComponent;

1. Mencegah Pengiraan Semula pada Render yang Tidak Diperlukan

Jika komponen anda mempunyai berbilang nilai keadaan tetapi hanya satu yang mempengaruhi pengiraan yang mahal, anda boleh menggunakan useMemo untuk mengelakkan pengiraan semula nilai tersebut melainkan keadaan yang berkaitan telah berubah.

---

Perbezaan Antara useMemo dan useCallback

Walaupun kedua-dua useMemo dan useCallback digunakan untuk menghafal, tujuannya berbeza:

• useMemo digunakan untuk menghafal hasil pengiraan atau panggilan fungsi yang mahal.
• useCallback digunakan untuk menghafal fungsi sebenar itu sendiri untuk menghalang penciptaan semula fungsi pada setiap pemaparan.

Kail Tujuan Contoh Penggunaan

Hook	Purpose	Example Usage
useMemo	Memoizes the result of a function call or calculation	Memoizing a computed value
useCallback	Memoizes the function itself	Preventing the creation of a new function on each render

useMemo Menghafal hasil panggilan atau pengiraan fungsi Menghafal nilai yang dikira useCallback Menghafal fungsi itu sendiri Menghalang penciptaan fungsi baharu pada setiap paparan

---

Pertimbangan Prestasi

• Elakkan Penggunaan Terlalu Banyak useMemo: Walaupun useMemo boleh mengoptimumkan prestasi, ia datang dengan kos tersendiri kerana React perlu menjejaki kebergantungan dan nilai yang dihafal. Dalam sesetengah kes, menggunakan useMemo mungkin tidak membawa kepada peningkatan prestasi yang ketara, terutamanya untuk pengiraan mudah.
• Penanda Aras: Adalah penting untuk menanda aras komponen anda sebelum dan selepas menggunakan useMemo untuk memastikan ia benar-benar meningkatkan prestasi dalam kes khusus anda.

---

Contoh useMemo dengan Isih

Berikut ialah contoh penggunaan useMemo untuk menghafal senarai yang diisih:

const memoizedValue = useMemo(() => expensiveFunction(param1, param2), [param1, param2]);

• Penjelasan:
  • Dalam contoh ini, sortedItems dihafal menggunakan useMemo. Operasi pengisihan hanya dikira semula apabila tatasusunan item atau keadaan Susun Isih berubah.
  • Tanpa useMemo, pengisihan akan berlaku pada setiap pemaparan, walaupun item mahupun Susunan tidak berubah.

---

Ringkasan penggunaanMemo Hook

• useMemo digunakan untuk menghafal pengiraan mahal dan mengiranya semula hanya apabila kebergantungan berubah.
• Ia boleh meningkatkan prestasi dengan ketara dengan mengelakkan pengiraan semula yang tidak perlu.
• useMemo harus digunakan untuk pengiraan atau pengiraan yang mahal dan hanya perlu dikira semula apabila perlu.

---

Kesimpulan

Kait useMemo ialah alat penting untuk mengoptimumkan prestasi dalam aplikasi React. Ia memastikan bahawa pengiraan mahal hanya dilakukan apabila perlu, menjadikan komponen anda lebih cekap. Walau bagaimanapun, ia harus digunakan dengan teliti, kerana penggunaan berlebihan boleh membawa kepada kerumitan yang tidak perlu dan potensi penurunan prestasi.

---

Atas ialah kandungan terperinci Mengoptimumkan Prestasi dengan penggunaan ReactMemo Hook: Menghafal Pengiraan Mahal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!