React-ის პროდუქტიულობის ოპტიმიზაციის ჰუკი useMemo

პირველი ჰუკი პროდუქტიულობის ოპტიმიზაციისთვის, რომელსაც განვიხილავთ, არის useMemo.

ეს ჰუკი ეხმარება კეშირებაში რესურსისმოხმარებადი ოპერაციების შედეგების ეკრანის გადახატვის მომენტებს შორის და შესაბამისად შეუძლია დაგვახსნას ზედმეტი მოცულობითი გამოთვლებისგან. ასეთ კეშირებას ასევე უწოდებენ მემოიზაციას.

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

return (
	<div>
		<h3>ტექსტი</h3>
		<button>დაწკაპება</button>
	</div>
);

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

const [isGreen, setIsGreen] = useState(false);

დავამატოთ ატრიბუტში style სათაურში ფერის შეცვლის პირობა და დავამატოთ დაწკაპების დამმუშავებელი:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>ტექსტი</h3>

მოდით, გვქონდეს ასევე რაღაც მნიშვნელობა, რომელიც გაიზრდება ჩვენს ღილაკზე დაწკაპებით ერთით. შევქმნათ მისთვის სთეითი:

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

დავამატოთ ღილაკზე დაწკაპების დამუშავება:

<button onClick={() => setNum(num + 1)}>
	დაწკაპებები
</button>

მოდით, გვქონდეს ასევე რაღაც ფუნქცია square, რომელიც დააბრუნებს num მნიშვნელობის კვადრატს. ფუნქციის გამოძახების შედეგს ჩავწერთ ცვლადში result:

const result = square(num);

function square(num) {
	return num * num;
}

ვაჩვენოთ result ღილაკის ტექსტში:

<button onClick={() => setNum(num + 1)}>
	დაწკაპებები: {result}
</button>

შედეგად, ჩვენ მივიღეთ შემდეგი: ღილაკზე დაწკაპებით იცვლება მნიშვნელობა num, რომელიც შემდეგ ამაღლებულია კვადრატში, ხოლო სათაურზე დაწკაპებით იცვლება სათაურის ფერი.

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

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

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// უბრალოდ არაფერი გააკეთოს ...
	}
	
	return num * num;
}

ახლა დააწკაპეთ სათაურზე. გამოდის, რომ ახლა ფუნქციის ხანგრძლივი მუშაობის გამო square (ღილაკს კი ჩვენ არ ვეხებით) ჩვენ მთელი სამუდამო უნდა ვიცადოთ, რომ სათაურს შეიცვალოს ფერი!

აქ კი ჩვენს დასახმარებლად მოვა ჰუკი useMemo. ამისთვის, ჩვენ პირველ პარამეტრად უნდა გადავცეთ ფუნქცია, რომელიც ითვლის მნიშვნელობას, რომლის კეშირებაც გვსურს, ეს ფუნქცია უნდა იყოს სუფთა და არ მიიღოს არანაირი პარამეტრი. ხოლო მეორე პარამეტრად - დამოკიდებულებები კვადრატულ ფრჩხილებში, სხვა სიტყვებით, ყველა რეაქტიული მნიშვნელობა, რომელიც მონაწილეობს ფუნქციის კოდში. ამ გზით, result-ში ჩვენ ახლა ჩავწერთ ასეთ კონსტრუქციას:

const result = useMemo(() => square(num), [num]);

კვლავ დავაწკაპოთ სათაურზე. ახლა, თუ ჩვენ არ ვეხებით გამოთვლების ღილაკს და არ ვცვლით ამ გზით სთეითის მნიშვნელობას num, მაშინ არაფერი გადაითვლება, და React აჩვენებს კეშირებულ მნიშვნელობას ღილაკში, ამიტომ ჩვენი სათაური სწრაფად იცვლის თავის ფერს.

შექმენით კომპონენტი App, მოათავსეთ მასში აბზაცი. შექმენით სთეითი text საწყისი მნიშვნელობით 'react', სთეითის მნიშვნელობა გამოჩნდეს აბზაცის ტექსტის სახით. აბზაცზე დაწკაპებით, მის ტექსტის ბოლოს დაემატოს ძახილის ნიშანი.

შექმენით კიდევ ერთი სთეითი num, საწყისი მნიშვნელობით 0. მოათავსეთ App-ში კიდევ ერთი აბზაცი. გახადეთ ისე, რომ მასზე დაწკაპებით num გაიზარდოს 1-ით.

ახლა კი დაამატეთ App-ში ფუნქცია triple, რომელიც პარამეტრად იღებს num-ს და აბრუნებს მის გასამმაგებულ მნიშვნელობას. ფუნქციის გამოძახების შედეგი ჩადეთ ცვლადში result. აჩვენეთ result მეორე აბზაცის ტექსტის სახით. დააწკაპეთ მონაცვლეობით აბზაცებს, შენიშნეთ, როგორ ნელა ემატება ძახილის ნიშნები.

გამოასწორეთ სიტუაცია, ნელი მოქმედები ფუნქცია triple useMemo-ში შეფუთვით.