React.js 06 – State trong React

0
188

State là gì ?

State là một đối tượng Javascript lưu trữ dữ liệu động của một component.

State là dữ liệu động, nó cho phép một component theo dõi thông tin thay đổi ở giữa các kết xuất (render) và làm cho nó có thể tương tác.

State chỉ có thể được sử dung ở trong một component sinh ra nó.

Nếu bạn dự đoán được một component sẽ cần quản lý state, thì nó nên được tạo ở trong component của class chứ không phải trong component của functions.

Điều đáng nói là state trong React là bất biến, nghĩa là state không bao giờ nên được thay đổi trực tiếp.

Thêm state vào component class

Từ dự án mà các bạn đã setup ở các buổi trước các bạn tạo cho tôi file mới với tên Hello.js.

File Hello.js

Để thêm state vào component Hello trong hàm khởi tạo của lớp (constructor) đặt state mặc định bằng đối tượng this.state

Cú pháp

Để lấy ra dữ liệu mà chúng ta khai báo trong state sử dụng cú pháp.

Ví dụ.

Các bạn lưu ý rằng constructor chấp nhận props làm đối số, sau đó nó được đưa đên super().

Việc gọi props có thể không cần thiết trừ khi bạn sử dụng nó trong component. Tuy nhiên React vẫn khuyên bạn luôn đặt gọi props để đảm bảo khả năng tương thích với các tính năng khác trong tương lai.

State được truy câp bằng cách sử dụng this.state như bạn đã thấy trong thẻ h1 của componetn Hello.

Bây giờ để chạy ví dụ trên các bạn import component Hello vào index.js vày thay đổi index.js bằng nội dung sau.

Cuối cùng các bạn chạy npm start để kiểm tra.

Thay đổi giá trị State

State được bắt đầu bằng cách sử dụng this.state, tuy nhiên tất cả các thay đổi tiếp theo đối với state được thực hiện bằng cách sử dụng this.setState . Việc sử dụng this.setState đảm bảo rằng các component bị ảnh hưởng bởi state được hiện thị lại trong trình duyệt.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây