Component trong lập trình là gì năm 2024

Component là thuật ngữ mang ý nghĩa như là bộ phận, thành phần hoặc yếu tố cầu thành của một hệ thống hoặc phần mềm nào đó trong lĩnh vực IT.

Trong lĩnh vực phần mềm, component có chức năng đặc biệt, được gọi ra từ các chương trình khác, được liên kết và sử dụng như một bộ phận của chương trình.

Có một thuật ngữ cũng mang ý nghĩa tương tự đó là module. Về mặt ngữ nghĩa, hai thuật ngữ này không có sự khác nhau là mấy nên hay được dùng chung trong nhiều trường hợp. Tuy nhiên, trong khi module mang hàm ý là bộ phận cấu thành có thể bổ sung trao đổi thêm các thông số kỹ thuật tiêu chuẩn một cách dễ dàng của các bộ phận phụ trợ cho hệ thống hoặc linh kiện khác, thì component lại đơn thuẩn chỉ là một yếu tố hoặc bộ phận thuần túy.

Trong bài trước chúng ta đã biết cách để cài đặt một ứng dụng đầu tiên với Reactjs. Tiếp tục bài hôm nay, mình sẽ hướng dẫn về Component trong react và cách quản lý chúng.

Component là block xây dựng nên mọi ứng dụng React. Component có thể được sử dụng riêng hoặc kết hợp với các component khác để có một component lớn hơn.

Điều quan trọng là các component này là động: chúng cung cấp một template, sẽ được điền vào bằng dữ liệu biến. Mục đích chính của một component React là tạo ra một số JSX từ template này, sẽ biên dịch sang HTML và hiển thị trên DOM.

STATELESS EXAMPLE

Chúng ta tiếp tục sử dụng lại App.js, thêm vào 2 components đó là Header và Content, App sẽ chứa 2 component mới thêm vào.

class Header extends React.Component { render() {

 return (  
    <div>  
       <h1>Header</h1>  
    </div>  
 );  

 return (  
    <div>  
       <h2>Content</h2>  
       <p>The content text!!!</p>  
    </div>  
 );  

<div>  
  <Header/>  
  <Content/>  
</div>  

Kết quả sẽ được như sau:

Chúng ta sẽ thử với một ví dụ khó hơn, ở đây sẽ có một khái niệm là “state”, có thể các bạn chưa biết nhưng để đó đã mình sẽ học ở bài sau, bây giờ hiểu về component đã nhé.

State sẽ là 1 mảng object, chúng ta thay content trong Content Component bằng ListStudent Component.

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App(){ return (

<div>  
  <Header/>  
  <Content/>  
</div>  

 return (  
    <div>  
       <h1>Header</h1>  
    </div>  
 );  

super();  
this.state = {  
   data:   
   [  
      {  
         "id":1,  
         "name":"NGUYEN VAN A",  
         "class":"JAVA"  
      },  
      {  
         "id":2,  
         "name":"NGUYEN VAN B",  
         "class":"PHP"  
      },  
      {  
         "id":3,  
         "name":"NGUYEN VAN C",  
         "class":"JAVA"  
      }  
   ]  
}  

 return (  
    <div>  
        <table>  
           <tbody>  
              {this.state.data.map((person, i) => <ListStudent key = {i}   
                 data = {person} />)}  
           </tbody>  
        </table>  
    </div>  
 );  

 return(  
  <tr>  
    <td>{this.props.data.id}</td>  
    <td>{this.props.data.name}</td>  
    <td>{this.props.data.class}</td>  
  </tr>  
 );  

Thêm tý css ở file App.css nhé:

table, th, td { border: 1px solid black; }

Kết quả nhận được:

Lưu ý chút ít:

Hàm map giống như for-loop js, nếu viết bằng for thì sẽ như thế này:

for (let i = 0; i < this.state.data.length; i++) {

 <ListStudent key = {i}  
                 data = {this.state.data[i]} />  

key={i} giúp React update lại element 1 cách chính xác với key đó thay vì render lại toàn bộ list, khi ta thay đổi 1 thành phần nào đó trong state, việc này rất hiệu quả nếu chúng ta có viết các ứng dụng lớn nhiều elements sau này.

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.

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ẻ

  // 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ới nội dung chào hỏi và tên được truyền qua props.

Sử dụng trong Component App:

• Trong 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 />; }
  2, 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

  // 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 />; }
  4 của nó.
• Khi

  // 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 />; }
  2 đượ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

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

7. 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ừ

  // 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 />; }
  7.
• Trong hàm constructor, khởi tạo trạng thái (

  // 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ới giá trị ban đầu là

  // 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;
  0.
• Có một phương thức

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

  1 để tăng giá trị của

  // 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;
  2 khi nút được nhấn.
• Hàm

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

  3 trả về một phần tử React hiển thị giá trị

  // 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;
  2 và một nút để tăng giá trị đó.

Sử dụng trong Component App:

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

  2, chúng ta sử dụng

  // 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;
  6 như một thành phần con.
• Khi

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

  2 được render, nó sẽ hiển thị

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

  6 và sử dụng nó để quản lý trạng thái của

  // 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;
  2.

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

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

2 component, chúng ta sử dụng

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

1 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

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

2:

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,

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

3 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:

ReactJS là gì? Những điều bạn cần biết về ReactJS

ReactJS là gì? Vì sao ReactJS cần thiết đối với các nhà lập trình web? Cùng tìm hiểu về các ứng dụng và khái niệm cần nắm rõ về ReactJS nhé!

React Hooks - Những điều bạn cần biết

React Hooks là một tính năng được giới thiệu trong React 16.8, cho phép bạn sử dụng các tính năng của React trong các functional components thay vì trong các class component.

ReactJS Tutorial : Introduction Leave Management Project

Chào mừng các bạn đến với series về ReactJS căn bản. Trong series này chúng ta sẽ được học và thực hành thông qua dự án “Leave Management” có thể được dịch nôm na là “quản lý ngày nghỉ”.

Tại sao bạn nên chọn GraphQL với ReactJS

Hầu hết mọi người đang sử dụng Rest Api để truy xuất và thao tác dữ liệu. Vậy tại sao lại cần chuyển qua GraphQL?

Component là gì trong web?

Web components là một tập các quy chuẩn công nghệ dùng cho việc xây dựng các thành phần trang web được đóng gói (tách biệt với phần code còn lại của ứng dụng) và có thể tái sử dụng.

Định nghĩa Component là gì?

Component là thuật ngữ mang ý nghĩa như là bộ phận, thành phần hoặc yếu tố cầu thành của một hệ thống hoặc phần mềm nào đó trong lĩnh vực IT. Trong lĩnh vực phần mềm, component có chức năng đặc biệt, được gọi ra từ các chương trình khác, được liên kết và sử dụng như một bộ phận của chương trình.

Component là gì có mấy loại?

Component: là một khối code độc lập, có thể tái sử dụng nhiều lần. Nhờ dùng component, bạn có thể chia UI thành nhiều phần nhỏ, mỗi phần là một component. Có hai loại component trong react là class và function.

Component trong phần mềm là gì?

Component trong lĩnh vực phần mềm, công nghệ thông tin được hiểu là những yếu tố quan trọng trong việc cấu thành một phần mềm hay một hệ thống. Component đảm nhận các chức năng đặc biệt, được liên kết và được sử dụng tương tự như một bộ phận của chương trình.