API memo dalam React

Sebelum kita melihat hook seterusnya, perlu disebutkan juga tentang API berguna memo, yang membantu kita mengelakkan penyusunan semula komponen, jika propnya tidak berubah.

Mari kita lihat ini dengan contoh. Mari buat komponen App, yang akan mempunyai dua input, yang, katakan, memasukkan nama dan nama keluarga:

return (
	<div>
		<label>
			name:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			surname:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Tambahkan state untuk mereka di bahagian atas komponen:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Mari buat juga komponen anak Child.js, biarkan ia memaparkan ucapan, yang akan memaparkan nama yang dimasukkan. Juga, dalam konsol akan dipaparkan talian 'child render' pada setiap kali komponen ini disusun semula:

function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
}

Tambahkan Child ke dalam susunan komponen utama selepas input terakhir dan hantarkan nama kepadanya sebagai prop:

<Child name={name} />

Import komponen tersebut ke dalam komponen utama:

import Child from './Child';

Sekarang mari buka konsol dan masukkan nama dan nama keluarga ke dalam medan input. Di sini kita akan melihat bahawa walaupun apabila memasukkan aksara ke dalam medan untuk nama keluarga, komponen anak kita akan disusun semula setiap kali. Tiada masalah, kerana komponen kami kecil. Tetapi bayangkan jika komponen ini memaparkan sejumlah besar data dan pada masa yang sama, disusun semula setiap kali.

Dan sekarang mari balut komponen anak dalam memo, dan lihat bagaimana penyusunan semula berubah. Mula-mula import memo ke dalamnya:

import { memo } from 'react';

Kemudian buat pembolehubah baru dan tugaskan Child kami kepadanya, dibalut dalam memo. Kami akan mendapat ungkapan fungsi berikut:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
});

Mari buka konsol dan sekali lagi masukkan nama dan nama keluarga ke dalam medan. Sekarang kita melihat bahawa apabila memasukkan nama keluarga, komponen anak kami tidak disusun semula.

Perlu diingat bahawa ini tidak akan berfungsi, jika dengan prop yang tidak berubah, state yang digunakan oleh komponen berubah atau konteks yang menggunakan perubahan.

Ambil kod komponen App, yang kami buat dalam pelajaran ini, tinggalkan hanya input pertama di dalamnya. Buat komponen React Text, mengandungi perenggan dengan teks 'long text', dan letakkannya dalam App selepas input.

Dalam komponen Text tambahkan baris console.log('text render');. Pastikan bahawa apabila memasukkan aksara ke dalam input, komponen Text disusun semula setiap kali.

Dan sekarang balut komponen Text dalam memo. Pastikan bahawa apabila memasukkan aksara ke dalam input komponen Text tidak disusun semula berulang kali.