Էֆեկտի 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 հուքի միջոցով փոխեք էջի վերնագիրը (title)։