2.2. Tìm hiểu về component

1. Component là gì ?

Component (thành phần) trong ReactJS là khối xây dựng cơ bản của một ứng dụng React, cho phép phân chia giao diện thành các phần nhỏ, hoạt động độc lập và có thể tái sử dụng chúng nhiều lần.

Ví dụ về website báo Dân trí với các component khác nhau

Ở hình ảnh trên, khi ta hợp nhất tất cả các component (các khối khoanh màu đỏ) trên sẽ tạo thành 1 giao diện hoàn chỉnh.

2. Các loại Component trong ReactJS

Hai loại component chính trong React JS

2.1. Function Component

Function Component là một hàm JavaScript thường có tên là hàm render, nhận một đối số là props (nếu cần) và trả về một phần tử React (ví dụ: JSX) để hiển thị nội dung trên giao diện người dùng. Hàm này có thể nhận hoặc không nhân dữ liệu dưới dạng tham số.

Function Component không có state và không sử dụng lifecycle methods.

Dưới đây là một ví dụ đơn giản về function component:

// Functional component
function Greeting(props) {
  return <div>Hello, {props.name}!</div>;
}

// Sử dụng functional component
const App = () => {
  return <Greeting name="PTIT" />;
}

Hàm Greeting:

• Là một functional component với tên là Greeting.

• Nhận đối số là props (properties), chứa thông tin được truyền vào component từ bên ngoài.

• Trả về một phần tử React (ở đây là một thẻ <div>) với nội dung chào hỏi và tên được truyền qua props.

Sử dụng trong Component App:

• Trong component App, chúng ta sử dụng Greeting như một thành phần con và truyền giá trị "PTIT" vào thuộc tính name của nó.

• Khi App được render, nó sẽ hiển thị nội dung của Greeting với tên "PTIT".

Ưu điểm lớn của functional component là chúng đơn giản, dễ đọc, và thường đủ cho các trường hợp sử dụng đơn giản. Ngoài ra, từ phiên bản React 16.8 trở đi, React phát triển Hooks, cho phép functional component sử dụng trạng thái và các tính năng trước đây chỉ có trong class component. Điều này làm tăng tính linh hoạt của functional component và giúp chúng có thể thay thế hoặc kết hợp chung với class component trong phát triển ứng dụng React. Phần này chúng ta sẽ nói ở các bài sau.

2.2. Class component

Class component được định nghĩa thông qua một class của JavaScript. Đối với class component, bạn sử dụng class để định nghĩa component, và component này phải kế thừa từ class React.Component. Class components thường được sử dụng khi cần theo dõi trạng thái (state) của component và sử dụng các lifecycle methods để quản lý vòng đời của component.

Ví dụ đơn giản về Class component:

// Class component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={this.incrementCount}>
          Increment
        </button>
      </div>
    );
  }
}

// Sử dụng class component
const App = () => {
  return <Counter />;
}

Class Component Counter:

• Là một class component kế thừa từ React.Component.

• Trong hàm constructor, khởi tạo trạng thái (this.state) với giá trị ban đầu là count: 0.

• Có một phương thức incrementCount để tăng giá trị của count khi nút được nhấn.

• Hàm render trả về một phần tử React hiển thị giá trị count và một nút để tăng giá trị đó.

Sử dụng trong Component App:

• Trong component App, chúng ta sử dụng Counter như một thành phần con.

• Khi App được render, nó sẽ hiển thị Counter và sử dụng nó để quản lý trạng thái của count.

Class components thường được sử dụng khi cần quản lý trạng thái phức tạp, sử dụng lifecycle methods, hoặc khi tích hợp với các tính năng mà functional components không thể đáp ứng trực tiếp.

3. Tái sử dụng và tổ chức Component

Một component trong ReactJS có thể được sử dụng nhiều lần và nhiều nơi, giảm sự lặp lại và làm cho mã nguồn dễ bảo trì hơn.

Để tái sử dụng được các component, bạn nên định nghĩa một công việc cụ thể cho component đó, sau đó có thể import qua các file khác nhau để tái sử dụng nhiều lần. Ngoài ra bạn có thể sử dụng kế thừa để tái sử dụng logic và chức năng.

Ví dụ ta có một website cần hiển thị các sản phẩm như mẫu trên. Lúc này, ta thấy các sản phẩm hiển thị có các thông tin giống nhau và lặp đi lặp lại (các khối màu xanh), lúc này chúng ta có thể nghĩ ngay đến việc chia nó thành các component, và phần khối màu đỏ là component cha (bao quanh các component con).

Ta có hai component là Product thể hiện thông tin chi tiết về mỗi sản phẩm và ProductList thể hiện danh sách các sản phẩm. Hai component được định nghĩa như sau:

import React from 'react';

const Product = ({ product }) => {
  return (
    <div className="product">
      <h2>{product.name}</h2>
      <p>Price: ${product.price}</p>
      <p>Description: {product.description}</p>
    </div>
  );
};

export default Product;

import React from 'react';
import Product from './Product';

const ProductList = ({ products }) => {
  return (
    <div className="product-list">
      <h1>Product List</h1>
      {products.map((product) => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
};

export default ProductList;

Ta có thể thấy, khi cần thay đổi cách hiển thị sản phẩm thì ta chỉ cần thay đổi ở component Product mà không làm ảnh hưởng tới các phần khác.

3.2 Tổ chức Component

Tính tổ chức của React cho phép bạn xây dựng một cây thành phần phản ánh cấu trúc của ứng dụng. Điều này giúp quản lý trạng thái và dữ liệu, cũng như giúp theo dõi luồng dữ liệu trong ứng dụng một cách hiệu quả.

Có nhiều cách tổ chức component như: Tổ chức theo chức năng, theo loại, theo mô hình, theo layout, theo cấp độ.

Ví dụ về tổ chức Component theo loại:

src/
  components/
    FunctionalComponents/
      Button.js
      Avatar.js
    ClassComponents/
      Counter.js
      UserProfile.js

Tùy thuộc vào quy mô và yêu cầu cụ thể của ứng dụng, bạn có thể kết hợp hoặc tùy chỉnh các cách tổ chức trên để tạo ra một cấu trúc mã nguồn hợp lý và dễ bảo trì. Điều quan trọng là duy trì sự nhất quán và có sự hiểu rõ về cấu trúc của ứng dụng.