React Class Component - Bạn đã hiểu rõ về Class Component?
30/11/2021 12:30
Trước React 16.8, React Class Component là cách duy nhất để theo dõi trạng thái và vòng đời của một thành phần React. Các thành phần chức năng được coi là "không có trạng thái". Với việc bổ sung Hooks, các thành phần Function bây giờ gần như tương đương với các thành phần Class. Sự khác biệt rất nhỏ nên có thể bạn sẽ không bao giờ cần sử dụng thành phần Class trong React. Mặc dù các thành phần Function được ưu tiên hơn, nhưng hiện tại không có kế hoạch nào về việc loại bỏ các thành phần Lớp khỏi React. Bài viết dưới đây sẽ cung cấp cho bạn một cái nhìn tổng quan về cách sử dụng các thành phần Class trong React.
React Class Component là gì?
Các thành phần là các bit mã độc lập và có thể tái sử dụng. Chúng phục vụ cùng mục đích như các hàm JavaScript, nhưng hoạt động riêng lẻ và trả về HTML thông qua một hàm render ().
Thành phần có hai loại, Class components và Function components, trong chương này bạn sẽ tìm hiểu về Class components
Tạo một React Class Component
Khi tạo một thành phần React, tên của thành phần đó phải bắt đầu bằng một chữ cái viết hoa.
Thành phần phải bao gồm câu lệnh extends React.Component, câu lệnh này tạo ra sự kế thừa cho React.Component và cấp cho thành phần của bạn quyền truy cập vào các chức năng của React.Component.
Thành phần cũng yêu cầu một phương thức render(), phương thức này trả về HTML.
Ví dụ:
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}Bây giờ ứng dụng React của bạn có một thành phần gọi là Car, nó trả về một phần tử <h2>.
Để sử dụng thành phần này trong ứng dụng của bạn, hãy sử dụng cú pháp tương tự như HTML thông thường: <Car />
Ví dụ:
ReactDOM.render(<Car />, document.getElementById('root'));>>> Đọc thêm: Ref trong Reactjs là gì? Cùng giải mã ngay thông tin về Ref trong Reactjs
Cấu tạo React Class Component
Nếu có một hàm constructor()trong thành phần của bạn, thì hàm này sẽ được gọi khi thành phần được khởi tạo.
Hàm khởi tạo là nơi bạn khởi tạo các thuộc tính của thành phần.
Trong React, các thuộc tính thành phần nên được giữ trong một đối tượng được gọi state.
Bạn sẽ tìm hiểu thêm về phần states au của hướng dẫn này.
Hàm khởi tạo cũng là nơi bạn tôn trọng sự kế thừa của thành phần mẹ bằng cách bao gồm câu lệnh super(), câu lệnh này thực thi hàm tạo của thành phần mẹ và thành phần của bạn có quyền truy cập vào tất cả các chức năng của thành phần mẹ ( React.Component).
Ví dụ:
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a Car!</h2>;
}
}Props
Một cách khác để xử lý các thuộc tính thành phần là sử dụng props.
Props giống như các đối số của hàm và bạn gửi chúng vào thành phần dưới dạng thuộc tính.
Ví dụ:
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));>>> Đọc thêm: State Reactjs là gì?
Props trong Constructor
Nếu thành phần của bạn có một hàm khởi tạo, các props phải luôn được chuyển cho hàm tạo và cả React.Component thông qua phương thức super().
Ví dụ:
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a {this.props.model}!</h2>;
}
}
ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));Component trong file
React là tất cả về việc sử dụng lại mã và có thể thông minh nếu chèn một số thành phần của bạn vào các tệp riêng biệt.
Để làm điều đó, hãy tạo một tệp mới có .js phần mở rộng tệp và đặt mã bên trong nó:
Lưu ý rằng tệp phải bắt đầu bằng cách nhập React (như trước đây) và phải kết thúc bằng câu lệnh export default Car;.
Ví dụ:
import React from 'react';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;Trên đây là một số thông tin về React Class Component, hy vọng bạn thấy các thông tin trên hữu ích cho các dự án của mình. Tìm hiểu thêm về khóa học lập trình về React cũng như các ngôn ngữ lập trình khác tại Viện Công nghệ thông tin T3H.
