ฮุคเอฟเฟกต์ 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';
	}, []);
	
	...
}

ในพารามิเตอร์ที่สอง จะส่งอาร์เรย์ของ dependencies ซึ่งรวมถึงค่าที่ใช้โดยฟังก์ชัน ของคอมโพเนนต์ ตอนนี้เราปล่อยให้มันว่างไว้ ในกรณีนี้สีจะถูกตั้งค่าเป็น สีเขียวเพียงครั้งเดียวหลังจากการเรนเดอร์ ไม่สามารถละเว้นพารามิเตอร์ที่สองได้ เนื่องจากคอมโพเนนต์ของคุณอาจ เข้าสู่ลูปไม่สิ้นสุด

ใช้ฮุค useEffect เพื่อเปลี่ยน title ของหน้า