Component trong ReactJS

1. Component là gì?

ReactJS là một thư viện JavaScript được Facebook phát triển để xây dựng giao diện người dùng (UI) tương tác và linh hoạt. Một trong những khái niệm cốt lõi nhất của ReactJS là "Component". Component là khối xây dựng cơ bản (fundamental building block) 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.

Ở hình vẽ trên, thanh Menu, phần hiển thị thông tin bên trái và bên phải đều là các thành phần riêng lẻ (component). Khi hợp nhất tất cả các component này lại chúng ta sẽ có được một giao diện hoàn chỉnh.

Về cơ bản Component trong ReactJS có cùng mục đích như các hàm Javascript nhưng hoạt động độc lập và luôn trả về HTML.

Tham khảo khóa Học ReactJS Thực Chiến

2. Các loại Component trong ReactJS

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.

Lưu ý rằng một phần tử (Element) React không phải là một component, nhưng một component có thể chưa nhiều phần tử React.

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="John" />;
}

Ví dụ về Function Component

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ị "John" 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 "John".

Ư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, có sẵ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.

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 />;
}

Ví dụ về Class Component

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

3.1 Tái sử dụng 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 (Inheritance) hoặc Higher-Order Components để tái sử dụng logic và chức năng.

Ví dụ về tái sử dụng Component:

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:

Product Component:

// Product.js
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;

ProducList Component:

// ProductList.js
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;

App sử dụng ProductList:

// ProductList.js
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;

Từ ba đoạn code trên chúng ta có thể thấy nếu muốn thay đổi cách hiển thị sản phẩm thì chỉ cần thay đổi Product component mà không làm ảnh hưởng tới các thành phần khác. Bất kỳ sự thay đổi nào trong Product component cũng sẽ dẫn đến sự thay đổi tương ứng ở ProductList và App sử dụng ProductList.

Trong App component, chúng ta sử dụng ProductList component để hiển thị danh sách sản phẩm. Việc này giúp chia nhỏ ứng dụng thành các thành phần độc lập, giảm lặp lại mã nguồn và làm cho mã nguồn dễ bảo trì.

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

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

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.

4. Lifecycle Methods của Component

Class Component cung cấp các phương thức tạo ra một vòng đời hoàn chỉnh cho Component gồm:

Khởi tạo (componentDidMount)
Thay đổi (ComponentDidUpdate)
Hủy bỏ (ComponentWillUnmount)

Sử dụng LifeCycle Methods giúp kiểm soát vòng đời của component và thực hiện các hành động như lấy dữ liệu từ API hoặc làm sạch tài nguyên.

5. Hooks

Hooks xuất hiện từ phiên bản React 16.8 trở đi như một tính năng hoàn toàn mới, giúp functional component có khả năng sử dụng trạng thái (state) và các tính năng của class component mà trước đây chỉ có thể sử dụng trong class component. Hooks giúp functional component trở nên linh hoạt hơn, mà không cần chuyển đổi chúng thành class components.

Hooks giúp functional components trở nên dễ đọc, tái sử dụng và bảo trì hơn, đồng thời giữ lại tính chất đơn giản của chúng.

Ví dụ sử dụng Hooks trong thư viện calendar reactjs:

import { useState } from 'react';
import Calendar from 'react-calendar';

type ValuePiece = Date | null;

type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyApp() {
  const [value, onChange] = useState<Value>(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

Ví dụ về sử dụng Hooks

Trong ví dụ trên, useContext cho phép truy cập giá trị của một context trong component.

6. Kết luận

Component là thành phần cốt lõi của ReactJS. Việc sử dụng thành thạo component sẽ giúp tạo ra mã nguồn dễ bảo trì, tái sử dụng và có tổ chức. Bạn có thể lựa chọn giữa Functional Component và Class Component tùy thuộc vào yêu cầu cụ thể của ứng dụng và cảm nhận cá nhân về cách làm việc. Sự kết hợp của Hooks cũng mang lại sự linh hoạt và hiệu suất tốt trong việc quản lý trạng thái và hiệu suất ứng dụng.

Tham khảo thêm các bài viết khác về Reactjs của 200Lab: