Theo dõi state ứng dụng là cách ứng dụng trang đơn (SAP) ghi nhận thay đổi và render cho người dùng. Khác với khung MVC (model, view, controller), SAP không chuyển hướng người dùng, do đó cần cách quản lý thay đổi từ client-side. Xem lại khung MVC, tham khảo hướng dẫn này.
Trong React, thành phần tự quản lý state và render lại tương ứng. Điều này qua phương thức vòng đời, thảo luận sâu ở đây. Mục đích bài, xem cách thay đổi state dùng setState.
Hướng dẫn giả định quen thuộc cơ bản React. Xem lại/học React cơ bản, bài này liệt kê 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 state thành phần với sự ổn định. Có nguyên tắc cụ thể thay đổi state React.
- setState chỉ gọi bên trong class component. Class component gọi
constructor()và đặt state ban đầu. Sau đó thay đổi state tiếp theo gọi setState.
Có hai loại thành phần React: functional component và class component. Mục đích này, chỉ tham chiếu class component. Xem thêm bài khác biệt functional và class component. - Chỉ gọi setState trong class component, ta tham chiếu trực tiếp thành phần dùng từ khóa this. Gọi
this.setState()là thực hành tốt nhất đảm bảo mã không bị lỡ. - Không sửa đổi state trực tiếp. Sửa trực tiếp state không đăng ký React render lại. Mục đích thay đổi state là kích hoạt render lại thành phần phản ánh thay đổi cho người dùng.
Bây giờ xem cú pháp ngữ cảnh nguyên tắc này.
Cú pháp setState React
Bắt đầu nguyên tắc đầu, ta thấy chỉ dùng setState trong class component. Ví dụ, giả sử ứng dụng mua sắm muốn triển khai giỏ hàng. Ta thiết lập class component gọi Cart. Thành phần này quản lý state khi người dùng thêm món vào giỏ.
class Cart extends React.Component {
constructor(props){
super(props);
this.state = {shoppingCart: []}
}
}
Phân tích mã, khai báo class component Cart. Giống mọi class component, ta extends React.Component. Đây cú pháp boilerplate React.
Vì muốn gán state thành phần, gọi phương thức constructor. Sau, constructor cơ sở gọi với super(props). Có thể thấy constructor cơ sở không gọi props. Tài liệu React chính thức lập luận constructor cơ sở luôn gọi với props.
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp 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 việc đầu tiên.
Bây giờ đã qua cú pháp React bắt buộc xây dựng class component giữ state, sẵn sàng gán state ban đầu. Đây lần duy nhất truy cập trực tiếp state. Gán state bằng this.state = {shoppingCart: [] } cho phép đặt state ban đầu giỏ hàng thành mảng rỗng.
Ví dụ React setState
Phần trên xem cú pháp khai báo state ban đầu. Khi state đặt trong constructor, render như thường:
class Cart extends React.Component {
constructor(props) {
super(props);
this.state = { shoppingCart: [] }
}
render() {
return (
<div>
<h1>Giỏ hàng của bạn</h1>
<div>{this.state.shoppingCart}</div>
</div>
);
}
}
ReactDOM.render(
<Cart />,
document.getElementById('root')
);
Ở đây, class component Cart với state ban đầu render giỏ hàng trong câu lệnh return của render. Hãy xem dùng setState cập nhật Cart.
Định nghĩa hàm thêm món mới vào shoppingCart bảo toàn món đã thêm. Dùng toán tử spread (...) JavaScript sao chép state ban đầu và cập nhật state mới. Cách này, giỏ hàng giữ tất cả món thêm.
addItem(newItem) {
this.setState({
shoppingCart: [...this.state.shoppingCart, newItem]
})
}
Hàm addItem dùng trong thuộc tính onClick của nút React nếu muốn người dùng thêm món khi nhấp nút. Mục đích, thấy cách dùng setState trong hàm là đủ.
Bài viết giới thiệu hiểu dùng setState, không toàn diện.
Kết luận
Trong bài, chúng ta học setState là gì, nguyên tắc dùng, cú pháp, ví dụ ngắn. Bài kích thích bạn đào sâu và tự thực hành cập nhật state thành phần.
Tài liệu React chính thức có thêm ví dụ cơ hội thực hành. Nhớ ứng dụng trang đơn, theo dõi state thành phần thiết yếu render thay đổi cho người dùng.