Angular Services vs. React Patterns: Tách Logic Trong Ứng Dụng - Ai Sẽ "Thắng"?

Lê Lân

13/06/2025

So Sánh Angular Services và Các Mẫu Kiến Trúc Trong React: Hướng Dẫn Toàn Diện

Mở Đầu

Angular developers thường quen thuộc với mô hình phát triển rõ ràng, trong đó services đóng vai trò là lớp trung gian giữa logic nghiệp vụ và giao diện người dùng (UI). Tuy nhiên, khi chuyển sang React — môi trường với sự tự do kiến trúc cao — câu hỏi về vị trí đặt logic và cách tách biệt nó khỏi giao diện trở nên phổ biến hơn bao giờ hết.

Bài viết này sẽ giúp bạn khám phá cách Angular và React xử lý việc phân tách logic và UI khác nhau như thế nào. Từ việc hiểu cách Angular sử dụng services qua dependency injection, đến các mẫu phổ biến trong React như Headless Components, Custom Hooks và Context API. Đồng thời, bài viết sẽ dẫn dắt bạn qua ví dụ minh họa, phân tích lợi ích và kết luận giúp bạn định hình kiến trúc phù hợp cho dự án của mình.

Angular Services: Tổ Chức Qua Dependency Injection

Định Nghĩa và Vai Trò

Angular services là các lớp có thể tiêm phụ thuộc (injectable classes) chứa các logic có thể tái sử dụng. Chúng chịu trách nhiệm chia sẻ trạng thái và hành vi giữa các component, ví dụ:

Xác thực người dùng

Gọi API HTTP

Truyền thông giữa component

Mối Liên Hệ Với Các Công Cụ Quản Lý Trạng Thái

Mặc dù Angular services rất mạnh, việc sử dụng chúng không loại trừ nhu cầu các công cụ quản lý trạng thái chuyên biệt như NgRx hoặc Akita khi ứng dụng trở nên phức tạp và đòi hỏi quản lý trạng thái hiệu quả hơn.

Ví Dụ Cơ Bản Về Dependency Injection Trong Angular

@Injectable({ providedIn: 'root' })
export class NotificationService {
  show(message: string) {
    // hiển thị toast thông báo
  }
}

Mẫu <u>Injectable</u> này cho phép service được sử dụng ở khắp nơi trong ứng dụng một cách dễ dàng thông qua DI (dependency injection).

React: Đa Dạng Kiến Trúc - Một Điểm Mạnh

Tính Linh Hoạt Và Trách Nhiệm

React không áp đặt cách tổ chức hay phân tách logic khỏi UI, điều này mang lại sự linh hoạt nhưng cũng đòi hỏi team phát triển phải tự xác định các quy tắc nhằm giữ cho codebase nhất quán và có thể mở rộng.

Các Phương Pháp Phổ Biến Trong React Để Tách Logic

Headless Components (Logic-only components): Các component chỉ thực thi logic mà không trực tiếp render UI.

Custom Hooks: Hàm chứa logic tái sử dụng dựa trên các hooks của React.

Context API: Giải pháp nội bộ để chia sẻ dữ liệu giữa các component mà không cần truyền props qua nhiều cấp.

Declarative Composition: Định nghĩa logic điều khiển UI thông qua cách compose các component.

Modules Bên Ngoài: Ví dụ như các file auth.ts hay useUser.ts chứa logic dùng chung.

Ví Dụ Minh Họa: Component Cha Cung Cấp Dữ Liệu Cho Component Con

Mô Tả Kịch Bản

Component cha chịu trách nhiệm lấy dữ liệu từ store rồi truyền xuống component con bằng props. Component con hoàn toàn không phụ thuộc vào nguồn dữ liệu, giúp nó trở nên tái sử dụng cao.

Mã Ví Dụ

// Parent.tsx
import { useUserStore } from './stores/useUserStore';
import { Child } from './Child';

export function Parent() {
  const { user } = useUserStore();
  if (!user) return null; // hoặc hiển thị spinner
  return <Child name={user.name} />;
}

// Child.tsx
export function Child({ name }: { name: string }) {
  return <p>Hello, {name}!</p>;
}

// App.tsx
import { Parent } from './Parent';

export default function App() {
  return (
    <main>
      <h1>Headless Component Example</h1>
      <Parent />
    </main>
  );
}

Lợi Ích Mẫu Thiết Kế Này

Component con (Child) là pure, dễ kiểm thử và tái sử dụng.

Component cha (Parent) đóng vai trò như bộ chuyển đổi logic, lấy dữ liệu từ store và inject vào child qua props.

Tách biệt rõ ràng giữa logic và UI, giúp dự án dễ mở rộng và bảo trì.

So Sánh Trực Tiếp: Angular Services và Các Mẫu Trong React

Tiêu chí	Angular Services	React Patterns
Tách biệt UI và Logic	Rõ ràng nhờ DI và services	Tự do, phụ thuộc vào team thiết kế
Tái sử dụng Logic	Qua services có thể inject đa nơi	Custom hooks, headless components dễ reusable
Quản lý trạng thái	Dùng dịch vụ + công cụ như NgRx, Akita	Context API hoặc các thư viện quản lý trạng thái bên ngoài
Tương tác với UI	Services gần như tách biệt UI hoàn toàn	Logic có thể nằm trong component hoặc ngoài UI tuỳ chọn
Ví dụ Headless Components	Không có khái niệm tương đương trực tiếp	Component không render UI, chỉ thực thi logic hoặc hiệu ứng phụ

Tìm Hiểu Các Mẫu React:

🌀 Headless Components

Component không render gì cả, chỉ thực hiện logic hoặc side effects.

function AnalyticsTracker() {
  useEffect(() => {
    trackPageView();
  }, []);
  return null;
}

🪝 Custom Hooks

Hàm khai thác lại logic dễ dàng chia sẻ giữa nhiều component.

function useAuth() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    // Fetch user data
  }, []);
  return { user };
}

🌐 Context API

Dùng để tránh việc truyền props qua nhiều layer.

const UserContext = createContext(null);

function useUser() {
  return useContext(UserContext);
}

🧱 Declarative Composition

Thay thế các câu lệnh điều kiện phức tạp bằng JSX dễ hiểu.

<When condition={user.isAdmin}>
  <AdminPanel />
</When>

Kết Luận

React không bắt buộc phải tách biệt UI và logic nhưng việc làm này mang lại nhiều lợi ích về mặt mở rộng, kiểm thử và bảo trì. Các pattern như headless components và custom hooks là cách mạnh mẽ để đóng gói logic không ảnh hưởng đến phần trình bày, đồng thời phù hợp với triết lý khai báo và mô hình thành phần của React.

So với Angular services, React không thiếu hụt, mà là cơ hội để xây dựng kiến trúc linh hoạt và phù hợp với nhu cầu riêng biệt của từng ứng dụng.

Để đạt hiệu quả tối đa, hãy cân nhắc kỹ khi chọn cách tổ chức logic phù hợp với quy mô và yêu cầu dự án, đồng thời duy trì sự nhất quán trong toàn bộ codebase.

Tham Khảo

Angular Official Documentation - Services and Dependency Injection

React Official Documentation - Hooks

Dan Abramov - "Presentational and Container Components"

Redux Documentation - Using React Redux

Kent C. Dodds - "Headless UI Components in React"

Blog post: "Separation of Concerns in React Apps" - link

NgRx Documentation - State Management

Akita Documentation - State Management

June 5, 2024