Hook Pengoptimuman Prestasi useCallback dalam React

Dalam pelajaran ini, kita akan melihat hook untuk pengoptimuman prestasi seterusnya useCallback.

Hook useCallback adalah serupa dengan API useMemo, perbezaannya ialah yang pertama meng-cache nilai antara saat-saat penyusunan semula skrin, manakala yang kedua - callback. Ini membolehkan kita tidak menjalankan semula fungsi yang menggunakan banyak sumber apabila tidak diperlukan dan boleh digunakan semasa menghantar fungsi kepada komponen anak.

Mari kita fahami dengan lebih terperinci melalui contoh. Pertama, mari kita cipta komponen App dan wujudkan state num di dalamnya:

const [num, setNum] = useState(0);

Mari kita ada butang, yang apabila diklik num akan meningkat sebanyak 1, dan perenggan di mana kita akan memaparkan nilai num:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>klik</button>
		<p>klik: {num}</p>
	</div>
);

Dan sekarang, andaikan dalam App juga dipaparkan beberapa senarai dengan elemen, yang akan kita tambah dengan menekan butang lain. Untuk menyimpan elemen senarai ini, kami akan wujudkan state items:

const [items, setItems] = useState([]);

Dan kemudian kami akan menulis fungsi addItem untuk menambahkannya:

function addItem() {
	setItems([...items, 'item baru']);
}

Sekarang mari kita tulis kod untuk memaparkan elemen senarai dan pindahkannya ke komponen anak Items, yang akan menerima array elemen dan fungsi untuk menambahkannya dalam bentuk props. Jangan lupa untuk menambah output ke konsol untuk melihat bila Items kami akan disusun semula:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items render');
	
	return (
		<div>
			<h3>Item kami</h3>
			{result}
			<button onClick={addItem}>tambah item</button>
		</div>
	);
}

export default Items;

Mari letakkan Items di hujung komponen App dan hantarkan kepadanya array items dan fungsi untuk menambah elemen addItem:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>klik</button>
			<p>klik: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

Dan sekarang mari kita klik butang dan pastikan bahawa num bertambah dan elemen baru ditambah ke dalam senarai. Dengan membuka konsol, kita akan melihat bahawa senarai kami disusun semula setiap kali, walaupun kami mengklik butang, yang meningkatkan num.

Jika kami mempunyai senarai kecil, maka semuanya baik, tetapi bagaimana jika diandaikan bahawa ia akan menjadi besar dan terdapat banyak lagi di sana? Tidak mengapa - anda akan katakan, kerana dalam pelajaran lepas kami telah melihat API memo, untuk mengelakkan penyusunan semula komponen yang tidak perlu.

Jadi mari kita balut komponen kami Items dalam memo dan selesai. Ini boleh dilakukan secara terus semasa mengeksport Items:

export default memo(Items);

Jangan lupa untuk mengimport memo:

import { memo } from 'react';

Dan sekarang mari buka konsol dan klik pada butang. Semua usaha sia-sia! Kami telah memoisasi komponen, tetapi apabila ditekan pada butang 'klik' komponen Items masih disusun semula setiap kali.

Masalahnya ialah apabila komponen induk disusun semula, fungsinya dicipta semula - ini termasuk fungsi kami addItem, yang kami hantar ke Items.

Tepat pada saat ini hook useCallback akan membantu kami. Mari kita gunakannya. Pertama, importnya ke dalam App:

import { useCallback } from 'react';

Kemudian ubahkan pengisytiharan fungsi biasa addItem kepada Function Expression, tentukan sebagai parameter pertama untuk useCallback fungsi kami dalam bentuk callback. Parameter kedua dalam kurungan segi empat sama tentukan kebergantungan - semua pemboleh ubah reaktif, yang terlibat dalam fungsi, dalam kes kami ini ialah array items:

const addItem = useCallback(() => {
	setItems(() => [...items, 'Item baru']);
}, [items]);

Selesai! Dengan cara ini kami telah meng-cache fungsi tersebut. Klik sekali lagi pada butang dan lihat bahawa sekarang apabila butang 'klik' ditekan, komponen anak kami tidak disusun semula.

Buat komponen App, letakkan perenggan dengan teks di dalamnya. Wujudkan state dengan nilai awal 'teks' dan paparkannya dalam perenggan. Biarkan apabila diklik pada perenggan, tanda seru ditambahkan pada akhir teksnya.

Buat komponen anak Products, di mana anda akan mempunyai butang untuk menambah produk baru. Letakkannya dalam App. Dalam komponen induk, buat state dengan array produk dan fungsi penambahan produk baru. Hantarkan mereka ke komponen anak sebagai props, paparkan di dalamnya array yang dihantar dalam bentuk senarai ul.

Dalam Products, paparkan teks 'products render' dalam konsol. Balut Products dalam memo. Klik pada perenggan dan butang. Pastikan, bahawa apabila mengklik pada perenggan, komponen anak masih disusun semula.

Cache fungsi untuk menambah produk, dengan membalutnya dalam hook useCallback. Klik pada perenggan dan butang. Pastikan, bahawa apabila mengklik pada perenggan, komponen anak tidak lagi disusun semula.