Khi làm việc với React – một thư viện JavaScript dùng để xây dựng giao diện người dùng – bạn sẽ thường xuyên gặp hai kiểu component chính: Function Component và Class Component. Mỗi loại có cách viết khác nhau, nhưng đều phục vụ mục đích là tạo ra một phần giao diện có thể tái sử dụng.
1. Function Component là gì?
Function Component (component dạng hàm) là một hàm JavaScript đơn giản nhận vào props và trả về JSX – một cú pháp mở rộng của JavaScript dùng để mô tả giao diện giống như HTML.
Ví dụ:
function Greeting(props) { return <h1>Xin chào, {props.name}!</h1>;
}
Từ React 16.8, với sự ra đời của Hooks, Function Component có thể sử dụng được state, effect và nhiều tính năng nâng cao khác mà trước đây chỉ có trong Class Component.
Ví dụ sử dụng state với Hook:
import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Bạn đã nhấn {count} lần</p> <button onClick={() => setCount(count + 1)}>Nhấn tôi</button> </div> );
}
2. Class Component là gì?
Class Component là cách định nghĩa component dựa trên lớp (class) của JavaScript. Đây là cách viết truyền thống trước khi có Hook, và là lựa chọn duy nhất nếu bạn muốn sử dụng state hoặc lifecycle methods trong các phiên bản React cũ.
Ví dụ:
import React, { Component } from 'react'; class Greeting extends Component { render() { return <h1>Xin chào, {this.props.name}!</h1>; }
}
Ví dụ sử dụng state trong Class Component:
class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } increase = () => { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <p>Bạn đã nhấn {this.state.count} lần</p> <button onClick={this.increase}>Nhấn tôi</button> </div> ); }
}
3. Lifecycle trong Function Component và Class Component
Lifecycle là các "giai đoạn sống" của một component: khi bắt đầu, khi cập nhật, và khi bị huỷ bỏ.
| Giai đoạn | Class Component | Function Component (Hook) |
|---|---|---|
| Khi component mount | componentDidMount() | useEffect(() => {}, []) |
| Khi component update | componentDidUpdate() | useEffect(() => {...}, [deps]) |
| Khi component unmount | componentWillUnmount() | useEffect(() => { return () => {...} }, []) |
Ví dụ Function Component với useEffect:
import { useEffect } from 'react'; function Example() { useEffect(() => { console.log('Component được tạo'); return () => { console.log('Component bị huỷ'); }; }, []); return <p>Xin chào!</p>;
}
4. So sánh Function Component và Class Component
| Tiêu chí | Function Component | Class Component |
|---|---|---|
| Cú pháp | Ngắn gọn, hiện đại | Dài dòng, nhiều this. |
| Dễ đọc, dễ bảo trì | Có | Khó hơn nếu code phức tạp |
| State | Dùng useState() | Dùng this.state + this.setState() |
| Lifecycle | Dùng useEffect() | Dùng các lifecycle method truyền thống |
| Hiệu suất | Tối ưu hơn trong hầu hết các trường hợp | Có thể chậm hơn vì nhiều boilerplate |
| Hỗ trợ Hook | Có | Không dùng Hook được |
| Tính năng nâng cao | Dùng thêm useReducer, useContext, ... | Dùng context, HOC, ... |
5. 🔚Kết luận
- Function Component là sự lựa chọn nên ưu tiên trong hầu hết các dự án hiện đại. Đặc biệt khi bạn đã quen với Hook.
- Class Component có thể vẫn cần thiết khi bạn:
- Làm việc với mã nguồn cũ.
- Dùng thư viện chưa hỗ trợ Hook.
- Học để hiểu rõ nguyên lý hoạt động của React (phục vụ cho phỏng vấn hoặc debug).
React đang ngày càng hướng đến sự đơn giản và tối ưu – đó là lý do Function Component với Hook được khuyến khích và sử dụng rộng rãi. Tuy nhiên, hiểu được cả hai loại sẽ giúp bạn trở thành lập trình viên React vững vàng hơn, dễ dàng đọc và duy trì các dự án với nhiều cấu trúc code khác nhau.