ეფექტის ჰუკი useEffect React-ში

ეფექტებთან მუშაობისთვის გამოიყენება ჰუკი useEffect. მოდით შევხედოთ მის მუშაობას.

პირველ რიგში, იმპორტი გავაკეთოთ ჩვენს ჰუკს:

import { useEffect } from 'react';

შევქმნათ კომპონენტი App, რომელიც შეიცავს სათაურს:

function App() {
	return (
		<div>
			<h1>React App</h1>
		</div>
	);
}

export default App;

დავუშვათ, რომ ჩვენ გვჭირდება რაიმე მოქმედების შესრულება რენდერინგის შემდეგ, მაგალითად, მთელი გვერდის ფონის ფერის დაყენება. ამ შემთხვევაში, გარე სისტემა იქნება ბრაუზერის DOM.

გამოვიყენოთ ჩვენი ჰუკი:

function App() {
	useEffect(() => {
		document.body.style.backgroundColor = 'green';
	}, []);
	
	...
}

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

ჰუკის useEffect გამოყენებით შეცვალეთ გვერდის სათაური.