Theo dõi trạng thái của ứng dụng là cách một ứng dụng trang (SAP) đăng ký các thay đổi và hiển thị chúng cho người dùng. Không giống như khuôn khổ mô hình, khung nhìn, bộ điều khiển (MVC), SAP không chuyển hướng người dùng và do đó cần một cách để quản lý các thay đổi đến từ phía máy khách. Để xem lại các khuôn khổ MVC, hãy tham khảo hướng dẫn này.
Trong React, bản thân các thành phần có thể tự quản lý trạng thái của chúng và kết xuất lại cho phù hợp. Điều này được thực hiện thông qua các phương pháp vòng đời, được thảo luận sâu ở đây. Với mục đích của bài viết này, chúng ta sẽ xem xét cách thay đổi trạng thái bằng setState.
Hướng dẫn này giả định bạn đã quen cơ bản với React. Để xem lại hoặc tìm hiểu kiến thức cơ bản về React, bài viết này liệt kê một số tài nguyên học React tốt nhất.
React setState là gì?
Phương thức React setState là cách thay đổi trạng thái của thành phần một cách ổn định. Có một số hướng dẫn cụ thể trong việc thay đổi trạng thái trong React.
- setState chỉ có thể được gọi bên trong một thành phần lớp. Các thành phần lớp gọi
constructor()phương thức và thiết lập trạng thái ban đầu. Sau đó, chúng ta có thể thay đổi trạng thái xuống sâu hơn bằng cách gọi setState.
Có hai loại thành phần khác nhau trong React. Có thành phần chức năng và thành phần lớp. Đối với mục đích của chúng tôi, chúng tôi chỉ tham chiếu đến các thành phần của lớp. Để xem xét thêm, hãy xem bài viết này về sự khác biệt giữa các thành phần chức năng và lớp.
- Bằng cách chỉ gọi setState trong một thành phần lớp, chúng tôi có thể trực tiếp tham chiếu đến chính thành phần đó bằng cách sử dụng this từ khóa. Gọi
this.setState()là phương pháp hay nhất và đảm bảo mã của bạn không bị hỏng.
- Không sửa đổi trạng thái trực tiếp. Việc sửa đổi trạng thái trực tiếp sẽ không đăng ký để React kết xuất lại. Toàn bộ điểm của việc thay đổi trạng thái là kích hoạt kết xuất thành phần đó để phản ánh các thay đổi trở lại người dùng.
Bây giờ, hãy xem cú pháp trong ngữ cảnh của các nguyên tắc này.
Cú pháp phản ứng setState
Bắt đầu với hướng dẫn đầu tiên, chúng ta thấy rằng chúng ta chỉ có thể sử dụng setState bên trong một thành phần lớp. Ví dụ:giả sử chúng ta có một ứng dụng mua sắm và chúng ta muốn triển khai giỏ hàng. Chúng ta có thể thiết lập một thành phần lớp được gọi là Cart. Thành phần này sẽ chịu trách nhiệm quản lý trạng thái của chính nó khi người dùng thêm một mặt hàng vào giỏ hàng.
class Cart extends React.Component {
constructor(props){
super(props);
this.state = {shoppingCart: []}
}
Chia nhỏ đoạn mã trên, chúng ta khai báo thành phần lớp Cart. Giống như tất cả các thành phần lớp, chúng tôi mở rộng React.Component. Đây là cú pháp React viết sẵn.
Vì chúng ta muốn gán trạng thái cho thành phần này, chúng ta phải gọi phương thức khởi tạo. Sau đó, hàm tạo cơ sở được gọi với super (props) . Có thể thấy hàm tạo cơ sở không được gọi với đạo cụ. Tài liệu chính thức về React lập luận rằng phương thức khởi tạo cơ sở nên luôn được gọi với các đạo cụ.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Bây giờ chúng ta đã thực hiện nó thông qua cú pháp React bắt buộc để xây dựng một thành phần lớp để giữ trạng thái, chúng ta đã sẵn sàng để gán trạng thái ban đầu của mình. Đây là lần duy nhất chúng tôi có thể trực tiếp tham khảo trạng thái. Chỉ định trạng thái bằng cách gọi this.state = {shoppingCart: [] } cho phép chúng tôi đặt trạng thái ban đầu của giỏ hàng thành một mảng trống.
Ví dụ về React setState
Trong phần trên, chúng ta đã xem xét cú pháp liên quan đến việc khai báo trạng thái ban đầu. Khi trạng thái được đặt trong phương thức khởi tạo, chúng ta có thể kết xuất như bình thường:
class Cart extends React.Component {
constructor(props) {
super(props);
this.state = {
shoppingCart: []
}
}
render() {
return (
<div>
<h1>Your Shopping Cart</h1>
<div>{this.state.shoppingCart}</div>
</div>
);
}
}
ReactDOM.render(
<Cart />,
document.getElementById('root')
);
Ở đây, chúng ta có một thành phần lớp Cart với trạng thái ban đầu được thiết lập và đang hiển thị giỏ hàng trong câu lệnh trả về của phương thức kết xuất. Hãy xem cách chúng ta có thể sử dụng setState để cập nhật Giỏ hàng của mình.
Chúng tôi xác định một chức năng sẽ thêm một mặt hàng mới vào ShoppingCart của chúng ta trong khi vẫn bảo toàn các mặt hàng đã thêm trước đó. Chúng tôi sử dụng toán tử lây lan của JavaScript (…) để tạo một bản sao của trạng thái ban đầu và cập nhật nó với trạng thái mới. Bằng cách này, giỏ hàng sẽ chứa tất cả các mặt hàng được thêm vào.
addItem(newItem) {
this.setState({
shoppingCart: [...this.state.shoppingCart, newItem]
})
}
Hàm addItem có thể được sử dụng bên trong thuộc tính onClick của React của một nút nếu chúng tôi muốn người dùng có thể thêm mục đó sau khi nhấp vào nút. Đối với mục đích của chúng tôi, việc xem cách sử dụng setState trong ngữ cảnh của một hàm là đủ.
Bài viết này nhằm mục đích giới thiệu cách sử dụng setState và không có nghĩa là đầy đủ.
Kết luận
Trong bài viết này, chúng ta đã tìm hiểu setState là gì, một số hướng dẫn về cách sử dụng nó, cú pháp và một ví dụ ngắn gọn. Đây có nghĩa là một bài báo mở đầu để khuyến khích bạn tìm hiểu sâu hơn và thực hành cập nhật trạng thái thành phần của riêng bạn.
Tài liệu chính thức về React có thêm các ví dụ sẽ cung cấp nhiều cơ hội để thực hành hơn. Hãy nhớ rằng trong các ứng dụng trang đơn, việc theo dõi trạng thái của thành phần là điều cần thiết để hiển thị các thay đổi cho người dùng.