React'теги колдонулуучу useCallback өндүрүмдүүлүктү оптималдоо хугу

Бул сабакта биз төмөнкү өндүрүмдүүлүктү оптималдоо хугу useCallback менен таанышабыз.

useCallback хугу API useMemo окшош, биринчиси экранды кайра чийилөөлөр аралыгында маанини кэштейт, ал эми экинчиси - коллбэк. Бул бизге керек эмес учурда ресурстун көп керектөөчү функцияларды кайра иштетүүдөн сактап, функцияны берүүдө бала компоненттерге пайдаланууга мүмкүндүк берет.

Келгиле, мисал менен кененирээк карап көрөлү. Алгач App компонентин түзөбүз жана анда num стейтин коёбуз:

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

Бизде баскыч болсун, ага чыкылдаганда num 1 көбөйөт, жана абзац, анда биз num маанисин чыгарабыз:

return (
	<div>
		<button onClick={() => setNum(num + 1)}>чыкылда</button>
		<p>чыкылдаулар: {num}</p>
	</div>
);

Эми, биздин App дагы кандайдыр бир тизме элементтер менен кошумчаланат деп ойлойлу, аны башка баскычты басуу менен кошобуз. Бул тизме элементтерин сактоо үчүн биз стейт items түзөбүз:

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

Анан аларды кошуу үчүн addItem функциясын жазабыз:

function addItem() {
	setItems([...items, 'жаңы элемент']);
}

Эми тизме элементтерин көрсөтүү үчүн код жазып, аны Items бала компонентине бөлүп чыгаралы, ал пропс катары элементтер массивин жана аларды кошуу функциясын алат. Көрсөтүү үчүн консольго чыгарууну унутпайлы, Items качан кайра чийилөөнү баштоосун көрүү үчүн:

function Items({ items, addItem }) {

	const result = items.map((item, index) => {
		return <p key={index}>{item}</p>;
	});
	
	console.log('Items кайра чийилөөдө');
	
	return (
		<div>
			<h3>Биздин элементтер</h3>
			{result}
			<button onClick={addItem}>элемент кошуу</button>
		</div>
	);
}

export default Items;

Items компоненттин аягында жайгаштырып, ага массив items жана элемент кошуу функциясын addItem беребиз:

return (
	<>
		<div>
			<button onClick={() => setNum(num + 1)}>чыкылда</button>
			<p>чыкылдаулар: {num}</p>
			<br />
		</div>
		<Items items={items} addItem={addItem} />
	</>
);

Эми баскычка бир нече жолу басып көрөлү жана num өсөрүнө жана жаңы элементтер тизмеге кошулганына көзүбүз жетсин. Консолду ачып, биз тизмени ар бир жолу кайра чийилөөрүн көрөбүз, num көбөйтүүчү баскычка басса дагы.

Эгерде тизмебиз кичине болсо, анда баары жакшы, ал эми ал чоң болуп, андагылар көп болсо? Айтасыз - өткөн сабакта биз memo APIсын карап чыктык, компоненттин керексиз кайра чийилөөлөрүнөн качуу үчүн.

Ошондо биздин компонент Items memo ге ороп коёлу. Аны түздөн-түз Items экспорттоодо жасаса болот:

export default memo(Items);

memo импорттоону унутпайлы:

import { memo } from 'react';

Эми консолду ачып, баскычка бир нече жолу басалы. Бардык аракет беш! Биз компонентти мемоизацияладык, бирок 'чыкылда' баскычты басканда Items компонент ар дайым кайра чийилөөдө.

Мунун себеби, ата-эне компонент кайра чийилөөдө, анын функциялары жаңыдан түзүлөт - бул биздин Items ге бере турган функциябызга дагы тиешелүү.

Ушул учурда бизге хук useCallback жардам берет. Аны колдонуп көрөлү. Алгач аны App ге импорттойлу:

import { useCallback } from 'react';

Анан жөнөкөй функциянын аныктамасын addItem дан Function Expression ге өзгөртөбүз, useCallback үчүн биринчи параметр катары биздин функцияны колбэк түрүндө көрсөтөбүз. Экинчи параметр катары чарчы кашаада көз карандылыктарды көрсөтөбүз - функцияга катышкан реактивдүү өзгөрмөлөр, биздин учурда бул массив items:

const addItem = useCallback(() => {
	setItems(() => [...items, 'Жаңы элемент']);
}, [items]);

Даяр! Ошентип биз функцияны кэштелдек. Баскычка дагы бир жолу басып көрөлү жана 'чыкылда' баскычты басканда биздин бала компонент кайра чийилөбөгөнүн көрөбүз.

App компонент түзүңүз, ага текст менен абзацты жайгаштырыңыз. Баштапкы мааниси 'текст' болгон стейт түзүп, аны абзацта чыгарыңыз. Абзацка чыкылдаганда ага тексттин аягына үндө белгиси кошулсын.

Products бала компонентин түзүңүз, анда жаңы продукт кошуу үчүн баскыч болсун. Аны App жайгаштырыңыз. Ата-эне компонентте продукттар массиви менен стейт түзүп, жаңы продукт кошуу функциясын жазыңыз. Аларды пропс катары балага бериңиз, анда берилген массивди ul түрүндөгү тизме катары чыгарыңыз.

Products да консольго 'продукттар кайра чийилөөдө' текстин чыгарыңыз. Products memo ге ороп коюңуз. Абзац жана баскычка чыкылдаңыз. Абзацка чыкылдаганда бала компонент кайра чийилөөрүнө көзүңүз жетсин.

Продукт кошуу функциясын хук useCallback ге ороп, кэштелдеңиз. Абзац жана баскычка чыкылдаңыз. Абзацка чыкылдаганда, бала компонент артык кайра чийилөбөгөнүн текшериңиз.