การขึ้นต่อกันใน useEffect ใน React

ทีนี้มาเปลี่ยนสีเมื่อกดปุ่มกัน สร้าง state color สำหรับสี โดยกำหนดค่าเริ่มต้น:

const [color, setColor] = useState('green');

แทนที่ค่าสตริงด้วย state ของเรา ใน useEffect และอย่าลืมเพิ่มมัน เข้าไปในรายการการขึ้นต่อกันในวงเล็บเหลี่ยม จากนี้เอฟเฟกต์จะทำงานทุกครั้ง เมื่อ state color เปลี่ยนแปลง:

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

ทีนี้มาเพิ่มปุ่ม สำหรับเปลี่ยนสีในคอมโพเนนต์ของเรา:

return (
	<div>
		<h1>React App</h1>
		<button onClick={changeColor}>change</button>
	</div>
);

เพิ่มฟังก์ชันตัวจัดการการคลิก ที่เปลี่ยนสีของเราเป็นสีส้ม:

function changeColor() {
	setColor('orange');
}

มี state สำหรับชื่อผู้ใช้ ทำให้ทุกครั้ง ที่ชื่อเปลี่ยน ค่า state จะถูกบันทึกลงใน ที่เก็บข้อมูลท้องถิ่นของเบราว์เซอร์