API memo React-ში

სანამ შემდეგ ჰუკს განვიხილავთ, აუცილებელია აღვნიშნოთ სასარგებლო API memo, რომელიც გვეხმარება თავიდან ავიცილოთ კომპონენტის ხელახალი რენდერი, თუ მისი პროფები უცვლელი რჩება.

მოდით, ეს მაგალითით გავაანალიზოთ. შევქმნათ კომპონენტი App, რომელშიც იქნება ორი ინფუთი, რომლებშიც, ვთქვათ, შეყვანილია სახელი და გვარი:

return (
	<div>
		<label>
			სახელი:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			გვარი:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

დავამატოთ კომპონენტის დასაწყისში მათი სტეიტები:

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

შევქმნათ ქვეკომპონენტი Child.js, მოდით ის გამოიტანოს m მისალოცი ტექსტი, რომელშიც აისახება შეყვანილი სახელი. ასევე კონსოლში დაიწერება სტრიქონი 'child render' ამ კომპონენტის ყოველი რენდერის დროს:

function Child({ name }) {
	console.log('child render');
	return <h3>გამარჯობა {name}!</h3>;
}

დავამატოთ Child მთავარი კომპონენტის ვერსტკაში ბოლო ინფუთის შემდეგ და პროფსად მივცეთ მას სახელი:

<Child name={name} />

იმპორტირება გავუკეთოთ მთავარ კომპონენტში:

import Child from './Child';

ახლა კი გავხსნათ კონსოლი და ინფუთების ველებში შევიყვანოთ სახელი და გვარი. აქ ჩვენ დავინახავთ, რომ გვარის ველში სიმბოლოების შეყვანისას even, ჩვენი ქვეკომპონენტი ყოველ ჯერზე გადაიხაზება. ამაში პრობლემა არაფერია, ბოლოსდაბოლოს ჩვენი კომპონენტი მცირეა. მაგრამ წარმოიდგინეთ, რომ ეს კომპონენტი გამოიტანდა დიდ მოცულობის მონაცემებს და ამავდროულად, მუდმივად გადაიხაზებოდა.

ახლა კი მოდით, შევუსაბამოთ ქვეკომპონენტი memo-ს და ვნახოთ, როგორ შეიცვლება რენდერი. ჯერ გავიტანოთ მასში memo:

import { memo } from 'react';

შემდეგ შევქმნათ ახალი ცვლადი და მივანიჭოთ მას ჩვენი Child, შეუსაბამებელი memo-ს. ჩვენ მივიღებთ შემდეგ ფუნქციურ გამოსახულებას:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>გამარჯობა {name}!</h3>;
});

გავხსნათ კონსოლი და კვლავ შევიყვანოთ სახელი და გვარი ველებში. ახლა ჩვენ დავინახავთ, რომ გვარის შეყვანისას, ჩვენი ქვეკომპონენტი აღარ გადაიხაზება.

უნდა გვახსოვდეს, რომ ეს არ იმუშავებს, თუ უცვლელი პროფებით შეიცვლება კომპონენტის მიერ გამოყენებული სტეიტები ან კონტექსტი, რომელიც იყენებს ცვლილებებს.

აიღეთ კომპონენტის App კოდი, რომელიც ჩვენ ამ გაკვეთილზე გავაკეთეთ, დატოვეთ მასში მხოლოდ პირველი ინფუთი. შექმენით React კომპონენტი Text, რომელიც შეიცავს აბზაცს ტექსტით 'long text', და განათავსეთ ის App-ში ინფუთის შემდეგ.

კომპონენტში Text დაამატეთ სტრიქონი console.log('text render');. დარწმუნდით, რომ სიმბოლოების შეყვანისას ინფუთში კომპონენტი Text გადაიხაზება ყოველ ჯერზე.

ახლა კი შეუსაბამეთ კომპონენტი Text memo-ს. დარწმუნდით, რომ სიმბოლოების შეყვანისას ინფუთში კომპონენტი Text აღარ გადაიხაზება ხელახლა.