Tính phản ứng của state trong React

Bây giờ hãy xem cách hoạt động của tính phản ứng. Nó đảm bảo rằng khi state thay đổi, các thay đổi sẽ lập tức được phản ánh trên màn hình.

Hãy xem một ví dụ. Giả sử chúng ta có một state chứa tên sản phẩm:

const [name, setName] = useState('prod');

Hãy hiển thị tên sản phẩm trong phần giao diện:

return <div>
	<span>{name}</span>
</div>;

Bây giờ hãy tạo một nút bấm, khi nhấn vào nó state của chúng ta sẽ thay đổi:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

Trong trình xử lý sự kiện click, chúng ta sử dụng hàm setName để đặt tên mới cho sản phẩm:

function clickHandler() {
	setName('xxxx');
}

Hãy tập hợp toàn bộ mã của chúng ta lại. Kết quả là sau khi nhấn nút, văn bản sẽ ngay lập tức đổi thành giá trị mới:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

Việc sử dụng các hàm xử lý riêng biệt là không bắt buộc. Có thể sử dụng hàm mũi tên ẩn danh:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Cho các state chứa tên và họ của người dùng. Hãy hiển thị chúng trong giao diện. Tạo các nút để thay đổi những state này.