Tingkatkan Prestasi Apl React Anda dengan Memoisasi: Meneroka useMemo, useCallback dan React.memo

Meningkatkan prestasi tapak web anda ialah langkah kritikal ke arah meningkatkan pengalaman pengguna dan memastikan antara muka yang kukuh dan responsif. Jika anda sedang mengusahakan projek React atau Next.js dengan beberapa komponen intensif sumber, wajar untuk bimbang tentang kesannya terhadap prestasi. Di sinilah penghafalan dalam React masuk—ia membantu mempercepatkan komponen 'mahal' ini, yang membawa kepada pengalaman yang lebih lancar untuk pengguna anda.

Dalam artikel ini, saya akan membincangkan penghafalan dan memperkenalkan cangkuk React yang boleh mengoptimumkan prestasi apl anda, seperti useMemo(), useCallback() dan Komponen Pesanan Tinggi (HOC) React.memo. Mari selami!

Apakah Memoization dalam React?

Memoisasi ialah teknik yang digunakan untuk mempercepatkan atur cara dengan menyimpan cache hasil tugasan pengiraan—seperti panggilan fungsi—supaya jika input yang sama diberikan semula, hasil cache dikembalikan dan bukannya mengira semula.

Cangkuk useMemo: Keputusan Cache dalam React

useMemo ialah cangkuk yang menyimpan cache atau menghafal hasil fungsi antara pemaparan semula atau mengemas kini komponen.

jadi dengan menggunakan cangkuk ini anda boleh cache hasil fungsi yang ada dalam komponen anda dan apabila pemaparan semula seterusnya komponen anda akan menggunakan hasil cache jika input fungsi itu tidak diubah.

Cara Melaksanakan useMemo:

useMemo ialah cangkuk yang mengambil fungsi anda yang tidak dioptimumkan sebagai panggilan balik dan senarai kebergantungan. React kemudian memutuskan masa untuk memanggil fungsi ini sama ada semasa pemaparan awal atau pada pemaparan semula berikutnya.

• Perenderan Awal: Semasa pemaparan awal, React memanggil fungsi useMemo untuk mengira dan menyimpan hasil fungsi panggil balik yang anda berikan.

• Memaparkan semula: Pada pemaparan semula, React memanggil useMemo untuk menyemak sama ada kebergantungan telah berubah. Jika kebergantungan tidak berubah, React menggunakan semula nilai cache yang disimpan semasa pemaparan terakhir. Walau bagaimanapun, jika kebergantungan telah berubah, useMemo memanggil fungsi panggil balik sekali lagi untuk mengira semula dan menyimpan nilai yang dikemas kini dalam cache.

Contoh:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

nombor kuasa dua dikira hanya apabila nombor berubah. useMemo menyimpan pengiraan ini, jadi ia tidak akan mengira semula secara tidak perlu pada setiap paparan.

Cangkuk useCallback: Definisi Fungsi Caching

useCallback ialah cangkuk yang menyimpan cache, atau memoize, takrifan fungsi antara pemaparan semula atau kemas kini komponen.

Dengan menggunakan cangkuk ini, anda boleh menyimpan definisi fungsi merentas pemaparan semula, jadi React akan menggunakan semula versi cache ini selagi kebergantungan fungsi itu tidak berubah.

Cara Melaksanakan useCallback:

useCallback ialah cangkuk yang mengambil fungsi (sebagai panggilan balik) dan senarai kebergantungan. React kemudian memutuskan masa untuk mengembalikan (bukan memanggil) fungsi ini—sama ada semasa pemaparan awal atau pada pemaparan semula berikutnya.

• Perenderan Awal: Semasa pemaparan awal, React memanggil useCallback untuk menyimpan fungsi yang anda lalui sebagai panggilan balik.

• Memaparkan semula: Pada pemaparan semula, React memanggil useCallback untuk menyemak sama ada kebergantungan telah berubah. Jika kebergantungan tidak berubah, React menggunakan semula fungsi cache yang disimpan semasa pemaparan terakhir. Jika kebergantungan telah berubah, useCallback akan menyimpan dan mengembalikan fungsi yang dikemas kini.

Contoh:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

Fungsi React.memo: Mencegah Paparan Semula yang Tidak Perlu

Seperti yang anda ketahui, apabila anda mempunyai komponen induk dan komponen anak, sebarang kemas kini kepada keadaan atau prop ibu bapa akan menyebabkan semua komponen anaknya dipaparkan semula. Dalam projek kecil, ini mungkin tidak menjadi isu, tetapi dalam aplikasi yang lebih besar dan lebih kompleks, pemaparan semula komponen kanak-kanak yang tidak perlu boleh memberi kesan kepada prestasi. Untuk menangani perkara ini, React menyediakan fungsi memo().

Fungsi memo (atau React.memo) membolehkan anda membalut komponen untuk menghalangnya daripada dipaparkan semula apabila ibu bapa mengemas kini. Komponen yang dibalut hanya akan dipaparkan semula jika prop atau keadaannya sendiri berubah.

Apabila anda mula-mula memanggil memo() pada komponen, React akan memaparkan dan menyimpan cache komponen tersebut. Pada pemaparan berikutnya, React akan menggunakan versi cache ini selagi prop dan keadaan komponen tidak berubah. Perlu diingat bahawa memo() hanya mengelakkan pemaparan semula untuk prop dan keadaan yang tidak berubah—sebaik sahaja ia berubah, memo() memaparkan semula dan mengemas kini komponen cache dengan sewajarnya.

Cara Melaksanakan React.memo:

Untuk melaksanakan memo dalam komponen anda, hanya bungkus komponen yang anda ingin halang daripada pemaparan semula yang tidak perlu dengan memo() atau React.memo():

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

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  // Memoize the callback with `count` as a dependency
  const calculate = useCallback(() => {
    console.log("Calculating:", count * multiplier);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier + 1)}>Increment Multiplier</button>
      <button onClick={calculate}>Calculate</button>
    </div>
  );
};

export default MyComponent;

Nota:
Jika anda menghantar objek sebagai prop kepada komponen yang dibalut dengan memo(), komponen tersebut masih akan dipaparkan semula pada setiap kemas kini, walaupun objek itu tidak berubah. Ini berlaku kerana React menggunakan Object.is untuk membandingkan prop sebelumnya dan semasa. Walaupun Object.is(3, 3) mengembalikan true, Object.is({}, {}) mengembalikan false, kerana dua rujukan objek berbeza tidak pernah dianggap sama.

Untuk mengelakkan perkara ini, anda boleh menggunakan useMemo untuk cache objek dan menyimpan rujukan yang sama merentas pemaparan:

import React from 'react';

const MyComponent = ({ data }) => {
  return <div>{data.value}</div>;
};

export default React.memo(MyComponent);

Dalam contoh ini, useMemo memastikan objek data mempunyai rujukan yang sama, menghalang pemaparan semula MyComponent yang tidak perlu.

Terima kasih kerana membaca artikel saya! Jika anda ingin mengetahui lebih lanjut tentang Next.js, React, JavaScript dan banyak lagi, sila ikuti tapak web saya: saeed-niyabati.ir. Jangan teragak-agak untuk menghubungi dengan sebarang pertanyaan. Jumpa lagi di lain kali!

Atas ialah kandungan terperinci Tingkatkan Prestasi Apl React Anda dengan Memoisasi: Meneroka useMemo, useCallback dan React.memo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!