Hướng dẫn sử dụng useState trong React

Thanh mật khẩu của bạn thay đổi từ yếu sang mạnh khi bạn nhập. React ghi nhớ những gì bạn nhập thông qua state.

State lưu trữ dữ liệu. Nó theo dõi những gì bạn nhập hoặc nhấp chuột.

Hãy tưởng tượng bạn đang nhập tên mình.

  • State ban đầu của bạn là một chuỗi rỗng.
  • Bạn nhập chữ J.
  • Bạn gọi một hàm để cập nhật state từ "" thành "J".
  • Bạn nhập chữ o.
  • Bạn gọi hàm để thay đổi state thành "Jo".

Mỗi khi bạn cập nhật state, React sẽ re-render UI. Re-rendering có nghĩa là React xóa bỏ giao diện cũ và vẽ một giao diện mới với dữ liệu đã được cập nhật của bạn.

Tại sao không sử dụng các biến thông thường? Một biến thông thường có thể thay đổi trong mã nguồn của bạn nhưng không cập nhật lên màn hình. Người dùng sẽ thấy dữ liệu cũ. React state khắc phục điều này bằng cách kết nối dữ liệu của bạn với UI.

Cách sử dụng useState:

  1. Import nó từ React. import { useState } from 'react';

  2. Khai báo nó. const [age, setAge] = useState(20);

Trong ví dụ này:

  • age là giá trị hiện tại của bạn.
  • setAge là hàm để thay đổi giá trị.
  • 20 là giá trị khởi tạo của bạn.

Hãy thử ngay bây giờ. Mở một dự án React. Tạo một bộ đếm. Nhấp vào một nút để cập nhật số lượng. Quan sát màn hình thay đổi ngay lập tức.

Nguồn: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i