🎴

Component trong React là gì? Sự khác biệt giữa Functional Component và Class Component?

Tác giả: Phi Long

Cập nhật lần cuối: 25/12/2024

Component là các khối xây dựng giao diện trong React. Nó giúp chia nhỏ UI thành các phần tái sử dụng và dễ dàng quản lý hơn.

Có 2 loại component chính:

Funtional Component (hàm)

Class Component (Lớp)

Funtional Component

✨ Sử dụng function để tạo component

✨ Dùng React Hooks (useState, useEffect, …) để quản lý state và vòng đời

✨ Khuyến khích sử dụng trong React hiện đại

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  console.log("Counter re-rendered!");
  const handleIncrementCounter = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button
        onClick={() => handleIncrementCounter()}
        className="bg-blue-500 text-white px-4 py-2 rounded my-3"
      >
        Increment
      </button>
    </div>
  );
};

export default Counter;

Class Component

✨ Trước khi Reat 16.8 xuất hiện

✨ Là cách duy nhất để dùng state và lifecycle trong React

✨ Dùng class và phải kế thừa từ React.Component

✨ Không phổ biến vì dài dòng hơn Functional Component + Hookh

Bình luận(0)

Hãy là người đầu tiên bình luận!