Nguyên Lý SOLID: Chìa Khóa Để Viết Code Sạch Trong React và React Native

Khám phá nguyên lý SOLID - bộ quy tắc thiết kế phần mềm nhằm cải thiện khả năng bảo trì và mở rộng ứng dụng của bạn. Bài viết này sẽ hướng dẫn bạn cách áp dụng SOLID vào quá trình phát triển ứng dụng với React và React Native, giúp bạn viết mã dễ hiểu, linh hoạt và dễ bảo trì. Đặc biệt, những kiến thức này sẽ giúp bạn chuẩn bị tốt hơn cho các cuộc phỏng vấn lập trình.

Giới Thiệu Về Nguyên Lý SOLID

Nguyên lý SOLID, được xem là kim chỉ nam cho các developer, bao gồm 5 nguyên tắc cốt lõi giúp tối ưu hoá mã nguồn. Việc áp dụng đúng SOLID trong React và React Native không chỉ mang lại những sản phẩm chất lượng mà còn dễ dàng hơn trong việc bảo trì và mở rộng sản phẩm trong tương lai.

1. Nguyên Lý Trách Nhiệm Đơn Nhất (SRP)

Định Nghĩa và Mục Đích

Nguyên lý Trách Nhiệm Đơn Nhất (SRP) đề xuất rằng mỗi class hay component chỉ nên có một trách nhiệm duy nhất, giúp mã trở nên dễ quản lý hơn.

Áp Dụng SRP Trong React/React Native

Ví dụ, thay vì để một component thực hiện cả việc lấy dữ liệu và hiển thị nó, chúng ta có thể tách biệt những hoạt động này ra thành các phần riêng biệt:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const useFetchItems = () => {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios.get('https://example.com/api/items')
      .then(response => setItems(response.data))
      .catch(error => console.error(error))
      .finally(() => setIsLoading(false));
  }, []);

  return { items, isLoading };
};

export default useFetchItems;

Component hiển thị sau đó chỉ cần gọi hook này:

import React from 'react';
import { View, Text, Image } from 'react-native';
import useFetchItems from './useFetchItems';

const DisplayList = () => {
  const { items, isLoading } = useFetchItems();

  if (isLoading) return <Text>Đang tải...</Text>;

  return (
    <View>
      {items.map(item => (
        <View key={item.id}>
          <Image source={{ uri: item.image }} style={{ width: 100, height: 100 }} />
          <Text>{item.name}</Text>
        </View>
      ))}
    </View>
  );
};

export default DisplayList;

2. Nguyên Lý Đóng/Mở (OCP)

Nguyên lý Đóng/Mở (OCP) nhấn mạnh rằng các module nên mở cho việc mở rộng mà không cần sửa đổi mã nguồn đã có. Điều này giúp tránh làm hỏng các chức năng hiện tại trong quá trình thêm mới tính năng.

Ví Dụ Minh Họa OCP

Khi tạo một nút bấm, bạn có thể sử dụng children prop để mở rộng chức năng của nút mà không cần phải thay đổi cấu trúc cũ:

const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

// Cách mở rộng
<Button onClick={handleAddToCart}>Thêm vào giỏ</Button>
<Button onClick={showModal}>Hiển thị Modal</Button>

3. Nguyên Lý Thay Thế Liskov (LSP)

Nguyên lý Thay Thế Liskov (LSP) khẳng định rằng các subclass có thể thay thế cho superclass mà không làm thay đổi tính đúng đắn của chương trình.

Ví Dụ Minh Họa LSP Trong React

Bạn có thể tạo các button cụ thể mà không ảnh hưởng đến logic của ứng dụng, ví dụ như:

const PrimaryButton = ({ onClick }) => (
  <Button onClick={onClick} style={{ backgroundColor: 'blue', color: 'white' }}>
    Click Me
  </Button>
);

4. Nguyên Lý Phân Tách Interface (ISP)

Nguyên lý Phân Tách Interface (ISP) khuyến khích việc chia tách các interface để giảm thiểu sự phụ thuộc không cần thiết vào các props không sử dụng.

Ví Dụ ISP Trong React

Thay vì truyền cả đối tượng người dùng, bạn chỉ nên truyền các thuộc tính cần thiết cho component:

const UserProfile = ({ avatar, name, bio }) => {
  return (
    <div>
      <img src={avatar} alt="avatar" />
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );
};

5. Nguyên Lý Đảo Ngược Phụ Thuộc (DIP)

Nguyên lý Đảo Ngược Phụ Thuộc (DIP) khuyến khích việc thiết kế component không phụ thuộc trực tiếp vào logic của bất kỳ component nào khác.

Ví Dụ DIP Trong React

Chẳng hạn, bạn có thể sử dụng hàm callback để xử lý logic submit một cách linh hoạt mà không cụ thể hóa logic bên trong:

const UserForm = ({ onSubmit, initialValues }) => {
  return (
    <form onSubmit={onSubmit}>
      {/* Các input field ở đây */}
    </form>
  );
};

Tóm lại, việc áp dụng nguyên lý SOLID không chỉ giúp bạn viết mã tốt hơn mà còn hỗ trợ quản lý và bảo trì dự án hiệu quả hơn, đồng thời tăng khả năng xin việc của bạn trong lĩnh vực phát triển phần mềm.
source: viblo