State Reactjs là gì - Khám phá State ReactJs chỉ trong 5 phút

 State ReactJS là gì?

State đại diện cho giá trị của một thuộc tính động của một thành phần React tại một phiên bản nhất định. React cung cấp một kho dữ liệu động cho mỗi thành phần. Dữ liệu nội bộ đại diện cho trạng thái của một thành phần React và có thể được truy cập bằng cách sử dụng biến thành viên this.state của thành phần đó. Bất cứ khi nào trạng thái của thành phần bị thay đổi, thành phần sẽ tự kết xuất lại bằng cách gọi phương thức render () cùng với trạng thái mới.

Một ví dụ đơn giản để hiểu rõ hơn về state management là phân tích một thành phần đồng hồ thời gian thực. Công việc chính của thành phần đồng hồ là hiển thị ngày và giờ của một vị trí tại phiên bản nhất định. Vì thời gian hiện tại sẽ thay đổi mỗi giây, thành phần đồng hồ phải duy trì ngày và giờ hiện tại ở trạng thái của nó. Khi trạng thái của thành phần đồng hồ thay đổi mỗi giây, phương thức render () của đồng hồ sẽ được gọi mỗi giây và phương thức render () hiển thị thời gian hiện tại bằng cách sử dụng trạng thái hiện tại của nó.

Ví dụ đơn giản của State ReactJS là:

{ 

   date: '2020-10-10 10:10:10' 

}

>>>> Đọc thêm: Proptypes trong ReactJS - Khám phá mọi điều về Proptypes

State Management API

Như chúng ta đã học trước đó, thành phần React duy trì và hiển thị trạng thái của nó thông qua this.state của thành phần. React cung cấp một API duy nhất để duy trì trạng thái trong thành phần. API là this.setState () . Nó chấp nhận một đối tượng JavaScript hoặc một hàm trả về một đối tượng JavaScript.

Ký hiệu setState API như dưới đây:

this.setState( { ... object ...} );

Ví dụ để set name trong API

this.setState( { name: 'John' } )

Ký hiệu setState API với chức năng tương tự như sau:

this.setState( (state, props) => 

   ... function returning JavaScript object ... );

Ở đây,

• state đề cập đến trạng thái hiện tại của thành phần React
• props đề cập đến các thuộc tính hiện tại của thành phần React.

Ví dụ sử dụng setState API

React khuyến nghị sử dụng setState API với chức năng vì nó hoạt động chính xác trong môi trường không đồng bộ. Thay vì hàm lambda, hàm JavaScript bình thường cũng có thể được sử dụng.

this.setState( function(state, props) { 

   return ... JavaScript object ... 

}

Một ví dụ đơn giản để cập nhật hàm lượng sử dụng như sau:

this.setState( (state, props) => ({ 

   amount: this.state.amount + this.props.additionaAmount 

})

React State không nên được sửa đổi trực tiếp thông qua biến thành viên this.state và việc cập nhật trạng thái thông qua biến thành viên sẽ không hiển thị lại thành phần.

Điểm đặc biệt của API trạng thái React là nó sẽ được hợp nhất với trạng thái hiện có thay vì thay thế trạng thái. Ví dụ: chúng ta có thể cập nhật bất kỳ một trong các trường trạng thái tại một thời điểm thay vì cập nhật toàn bộ đối tượng. Tính năng này mang lại cho nhà phát triển sự linh hoạt để dễ dàng xử lý dữ liệu trạng thái.

Điểm đặc biệt của API trạng thái React là nó sẽ được hợp nhất với trạng thái hiện có thay vì thay thế trạng thái. Ví dụ: chúng ta có thể cập nhật bất kỳ một trong các trường trạng thái tại một thời điểm thay vì cập nhật toàn bộ đối tượng. Tính năng này mang lại cho nhà phát triển sự linh hoạt để dễ dàng xử lý dữ liệu trạng thái.

>>> Đọc thêm: Hướng dẫn CORS ReactJS - Làm thế nào để sử dụng CORS ReactJS

State ReactJS - Layout in Component

Một trong những tính năng nâng cao của React là nó cho phép nội dung giao diện người dùng (UI) tùy ý được truyền vào thành phần bằng cách sử dụng các thuộc tính. So với thuộc tính con đặc biệt của React, chỉ cho phép một nội dung giao diện người dùng duy nhất được truyền vào thành phần, tùy chọn này cho phép nhiều nội dung giao diện người dùng được chuyển vào thành phần. Tùy chọn này có thể được xem như một phần mở rộng của children property.

 Một trong những trường hợp sử dụng của tùy chọn này là bố trí giao diện người dùng của một thành phần.

Ví dụ: một thành phần có đầu trang và chân trang có thể tùy chỉnh có thể sử dụng tùy chọn này để lấy đầu trang và chân trang tùy chỉnh thông qua các thuộc tính và bố cục nội dung.

Dưới đây là một ví dụ nhanh chóng và đơn giản với hai thuộc tính, đầu trang và chân trang

<Layout header={<h1>Header</h1>} footer={<p>footer</p>} />

Bố cục sẽ hiển thị như sau:

return (<div>

   <div> 

      {props.header} 

   </div> 

   <div> 

      Component user interface 

   </div> 

   <div> 

      {props.footer} 

   </div> 

</div>)

Trên đây là một số thông tin về State ReactJs bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs và các khóa học lập trình khác của Viện công nghệ thông tin T3H.