Class Component là một trong hai phương pháp để tạo ra các component trong React Js, cùng với Functional Component. Class Component là một class ES6 (ECMAScript 6) kế thừa từ React.Component, được sử dụng để xây dựng các component phức tạp hơn, hoặc khi cần lưu trữ trạng thái (state) của component.
Một Class Component bao gồm các phương thức đặc biệt như constructor(), render(), componentDidMount(), componentWillUnmount() và nhiều phương thức khác để quản lý trạng thái và thao tác với component.
Class Component cung cấp khả năng tái sử dụng code, đảm bảo tính nhất quán trong hành vi của component và giúp cho việc quản lý state của component dễ dàng hơn. Tuy nhiên, Class Component có thể trở nên khó khăn để hiểu và bảo trì nếu không được sử dụng đúng cách.
Cú pháp Component
Để tạo một Class Component trong React Js, bạn cần định nghĩa một class ES6 và kế thừa từ React.Component. Cú pháp của Class Component như sau:
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.state = {
// khởi tạo trạng thái của component
};
}
componentDidMount() {
// thực hiện các tác vụ sau khi component được render lần đầu tiên
}
componentWillUnmount() {
// thực hiện các tác vụ trước khi component bị xóa khỏi <a href="https://nodemy.vn/tu-tin-tuong-tac-voi-trang-web-cua-ban-voi-dom-trong-javascript-huong-dan-tu-co-ban-den-nang-cao-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">DOM</a>
}
render() {
return (
// code JSX để render component
);
}
}
export default MyComponent;
Trong đó:
import React, { Component } from 'react';để import React và Component từ thư viện reactclass MyComponent extends Component {là định nghĩa của class component, trong đóMyComponentlà tên của component.constructor(props)là phương thức khởi tạo của class, trong đó bạn có thể khởi tạo trạng thái ban đầu của component.componentDidMount()là phương thức được gọi sau khi component được render lần đầu tiên.componentWillUnmount()là phương thức được gọi trước khi component bị xóa khỏi DOM.render()là phương thức bắt buộc của class, trả về code JSX để render component.export default MyComponent;để xuất component ra ngoài để sử dụng.
Ví dụ về cách sử dụng
Dưới đây là một ví dụ đơn giản về cách tạo một Class Component trong React Js:
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
<h1><span class="ez-toc-section" id="Count_thisstatecount"></span>Count: {this.state.count}<span class="ez-toc-section-end"></span></h1>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}
export default Counter;
count bằng 0 ban đầu. Phương thức incrementCount() được sử dụng để tăng giá trị của count lên 1 mỗi khi nút “Increment” được nhấn.Trong phương thức render(), chúng ta trả về các phần tử JSX để hiển thị số lượng đếm và nút “Increment”. Khi nút được nhấn, phương thức incrementCount() được gọi để cập nhật giá trị của count và làm cho component được render lại với giá trị mới.
Kết luận và bài viết có liên quan
Bài viết có liên quan:
Tìm hiểu về classComponent trong React Js
Sử dụng useReducer hook trong React
Thư viện carousel được sử dụng để tạo các slideshow (React )
