Kesan Hook useEffect dalam React

Untuk bekerja dengan kesan, hook useEffect digunakan. Mari kita lihat cara kerjanya.

Pertama, import hook kami:

import { useEffect } from 'react';

Mari buat komponen App yang mengandungi tajuk:

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

export default App;

Katakanlah kita perlu melakukan beberapa tindakan selepas rendering, contohnya, menetapkan warna latar belakang seluruh halaman. Dalam kes ini, sistem luaran akan menjadi DOM pelayar.

Gunakan hook kami:

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

Parameter kedua menerima array kebergantungan. Ia termasuk nilai yang digunakan oleh fungsi komponen. Buat masa ini, kami membiarkannya kosong. Dalam kes ini, warna akan ditetapkan kepada hijau hanya sekali selepas rendering. Tidak boleh mengabaikan parameter kedua sepenuhnya, kerana komponen anda mungkin masuk ke dalam gelung tak terhingga.

Gunakan hook useEffect untuk menukar tajuk halaman.