React useReducer: Nắm Vững Các Mô Hình Quản Lý State Phức Tạp

Hook useReducer của React là một công cụ mạnh mẽ để quản lý state phức tạp trong ứng dụng của bạn. Không giống như useState, thường phù hợp cho các cập nhật state đơn giản hơn, useReducer vượt trội khi xử lý logic state phức tạp và các cập nhật phụ thuộc vào state trước đó. Hướng dẫn toàn diện này sẽ đi sâu vào những chi tiết phức tạp của useReducer, khám phá các mô hình nâng cao và cung cấp các ví dụ thực tế cho các nhà phát triển trên toàn thế giới.

Tìm Hiểu Những Kiến Thức Cơ Bản về useReducer

Về cơ bản, useReducer là một công cụ quản lý state được lấy cảm hứng từ mô hình Redux. Nó nhận hai đối số: một hàm reducer và một initial state. Hàm reducer xử lý các chuyển đổi state dựa trên các hành động được dispatch. Mô hình này thúc đẩy code sạch hơn, dễ gỡ lỗi hơn và các cập nhật state có thể dự đoán được, điều này rất quan trọng đối với các ứng dụng thuộc mọi quy mô. Hãy cùng phân tích các thành phần:

• Hàm Reducer: Đây là trái tim của useReducer. Nó nhận state hiện tại và một đối tượng action làm đầu vào và trả về state mới. Đối tượng action thường có một thuộc tính type mô tả hành động cần thực hiện và có thể bao gồm một payload với dữ liệu bổ sung.
• Initial State: Đây là điểm khởi đầu cho state của ứng dụng của bạn.
• Hàm Dispatch: Hàm này cho phép bạn kích hoạt các cập nhật state bằng cách dispatch các action. Hàm dispatch được cung cấp bởi useReducer.

Dưới đây là một ví dụ đơn giản minh họa cấu trúc cơ bản:

            
import React, { useReducer } from 'react';

// Define the reducer function
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // Initialize useReducer
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Trong ví dụ này, hàm reducer xử lý các hành động tăng và giảm, cập nhật state `count`. Hàm dispatch được sử dụng để kích hoạt các chuyển đổi state này.

Các Mô Hình useReducer Nâng Cao

Mặc dù mô hình useReducer cơ bản khá đơn giản, nhưng sức mạnh thực sự của nó sẽ trở nên rõ ràng khi bạn bắt đầu xử lý logic state phức tạp hơn. Dưới đây là một số mô hình nâng cao cần xem xét:

1. Payload Action Phức Tạp

Các action không nhất thiết phải là các chuỗi đơn giản như 'increment' hoặc 'decrement'. Chúng có thể mang thông tin phong phú. Sử dụng payload cho phép bạn truyền dữ liệu đến reducer để cập nhật state linh hoạt hơn. Điều này cực kỳ hữu ích cho các biểu mẫu, gọi API và quản lý danh sách.

            
function reducer(state, action) {
  switch (action.type) {
    case 'add_item':
      return { ...state, items: [...state.items, action.payload] };
    case 'remove_item':
      return { ...state, items: state.items.filter(item => item.id !== action.payload) };
    default:
      return state;
  }
}

// Example action dispatch
dispatch({ type: 'add_item', payload: { id: 1, name: 'Item 1' } });
dispatch({ type: 'remove_item', payload: 1 }); // Remove item with id 1

            

              
                Copy
              
            
          

2. Sử Dụng Nhiều Reducer (Kết Hợp Reducer)

Đối với các ứng dụng lớn hơn, việc quản lý tất cả các chuyển đổi state trong một reducer duy nhất có thể trở nên cồng kềnh. Kết hợp reducer cho phép bạn chia nhỏ việc quản lý state thành các phần nhỏ hơn, dễ quản lý hơn. Bạn có thể đạt được điều này bằng cách kết hợp nhiều reducer thành một reducer cấp cao nhất duy nhất.

            
// Individual Reducers
function itemReducer(state, action) {
  switch (action.type) {
    case 'add_item':
      return { ...state, items: [...state.items, action.payload] };
    case 'remove_item':
      return { ...state, items: state.items.filter(item => item.id !== action.payload) };
    default:
      return state;
  }
}

function filterReducer(state, action) {
    switch(action.type) {
        case 'SET_FILTER':
            return {...state, filter: action.payload}
        default:
            return state;
    }
}

// Combining Reducers
function combinedReducer(state, action) {
  return {
    items: itemReducer(state.items, action),
    filter: filterReducer(state.filter, action)
  };
}

// Initial state (Example)
const initialState = {
    items: [],
    filter: 'all'
};

function App() {
  const [state, dispatch] = useReducer(combinedReducer, initialState);

  return (
    <div>
      {/* UI Components that trigger actions on combinedReducer */} 
    </div>
  );
}

            

              
                Copy
              
            
          

3. Sử Dụng `useReducer` với Context API

Context API cung cấp một cách để truyền dữ liệu qua cây thành phần mà không cần phải truyền props thủ công ở mọi cấp độ. Khi kết hợp với useReducer, nó tạo ra một giải pháp quản lý state mạnh mẽ và hiệu quả, thường được coi là một lựa chọn thay thế nhẹ nhàng cho Redux. Mô hình này đặc biệt hữu ích để quản lý state ứng dụng toàn cục.

            
import React, { createContext, useContext, useReducer } from 'react';

// Create a context for our state
const AppContext = createContext();

// Define the reducer and initial state (as before)
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const initialState = { count: 0 };

// Create a provider component
function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}

// Create a custom hook for easy access
function useAppState() {
  return useContext(AppContext);
}

function Counter() {
  const { state, dispatch } = useAppState();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

function App() {
  return (
    <AppProvider>
      <Counter />
    </AppProvider>
  );
}

            

              
                Copy
              
            
          

Tại đây, AppContext cung cấp state và hàm dispatch cho tất cả các thành phần con. Hook tùy chỉnh useAppState giúp đơn giản hóa việc truy cập context.

4. Triển Khai Thunk (Hành Động Bất Đồng Bộ)

useReducer mặc định là đồng bộ. Tuy nhiên, trong nhiều ứng dụng, bạn sẽ cần thực hiện các thao tác bất đồng bộ, chẳng hạn như tìm nạp dữ liệu từ API. Thunk cho phép các hành động bất đồng bộ. Bạn có thể đạt được điều này bằng cách dispatch một hàm (một "thunk") thay vì một đối tượng action thuần túy. Hàm sẽ nhận hàm `dispatch` và sau đó có thể dispatch nhiều action dựa trên kết quả của thao tác bất đồng bộ.

            
function fetchUserData(userId) {
  return async (dispatch) => {
    dispatch({ type: 'request_user' });
    try {
      const response = await fetch(`/api/users/${userId}`);
      const user = await response.json();
      dispatch({ type: 'receive_user', payload: user });
    } catch (error) {
      dispatch({ type: 'request_user_error', payload: error });
    }
  };
}

function reducer(state, action) {
  switch (action.type) {
    case 'request_user':
      return { ...state, loading: true, error: null };
    case 'receive_user':
      return { ...state, loading: false, user: action.payload, error: null };
    case 'request_user_error':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

function UserProfile({ userId }) {
  const [state, dispatch] = useReducer(reducer, { loading: false, user: null, error: null });

  React.useEffect(() => {
    dispatch(fetchUserData(userId));
  }, [userId, dispatch]);

  if (state.loading) return <p>Loading...</p>;
  if (state.error) return <p>Error: {state.error.message}</p>;
  if (!state.user) return null;

  return (
    <div>
      <h2>{state.user.name}</h2>
      <p>Email: {state.user.email}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

Ví dụ này dispatch các hành động cho trạng thái tải, thành công và lỗi trong quá trình gọi API bất đồng bộ. Bạn có thể cần một middleware như `redux-thunk` cho các tình huống phức tạp hơn; tuy nhiên, đối với các trường hợp sử dụng đơn giản hơn, mô hình này hoạt động rất tốt.

Kỹ Thuật Tối Ưu Hóa Hiệu Suất

Tối ưu hóa hiệu suất của ứng dụng React là rất quan trọng, đặc biệt khi làm việc với quản lý state phức tạp. Dưới đây là một số kỹ thuật bạn có thể áp dụng khi sử dụng useReducer:

1. Memoize Hàm Dispatch

Hàm dispatch từ useReducer thường không thay đổi giữa các lần render, nhưng vẫn là một thực hành tốt để memoize nó nếu bạn truyền nó cho các thành phần con để ngăn chặn các lần render lại không cần thiết. Hãy sử dụng React.useCallback cho việc này:

            
const [state, dispatch] = useReducer(reducer, initialState);
const memoizedDispatch = React.useCallback(dispatch, []); // Memoize dispatch function

            

              
                Copy
              
            
          

Điều này đảm bảo rằng hàm dispatch chỉ thay đổi khi các dependencies trong mảng dependency thay đổi (trong trường hợp này, không có dependency nào, vì vậy nó sẽ không thay đổi).

2. Tối Ưu Hóa Logic Reducer

Hàm reducer được thực thi trên mọi cập nhật state. Đảm bảo reducer của bạn có hiệu suất tốt bằng cách giảm thiểu các tính toán không cần thiết và tránh các thao tác phức tạp trong hàm reducer. Hãy xem xét những điều sau:

• Cập Nhật State Bất Biến: Luôn cập nhật state một cách bất biến. Sử dụng toán tử spread (...) hoặc Object.assign() để tạo các đối tượng state mới thay vì sửa đổi trực tiếp các đối tượng hiện có. Điều này quan trọng cho việc phát hiện thay đổi và tránh các hành vi không mong muốn.
• Tránh Deep Copy Không Cần Thiết: Chỉ tạo bản sao sâu (deep copy) của các đối tượng state khi thực sự cần thiết. Bản sao nông (shallow copy) (sử dụng toán tử spread cho các đối tượng đơn giản) thường là đủ và ít tốn kém tính toán hơn.
• Khởi Tạo Lười (Lazy Initialization): Nếu việc tính toán initial state tốn kém về mặt tính toán, bạn có thể sử dụng một hàm để khởi tạo state. Hàm này sẽ chỉ chạy một lần, trong lần render ban đầu.

            
//Lazy initialization
const [state, dispatch] = useReducer(reducer, initialState, (initialArg) => {
  //Expensive initialization logic here
  return {
    ...initialArg,
    initializedData: 'data'
  }
});

            

              
                Copy
              
            
          

3. Memoize Các Tính Toán Phức Tạp với `useMemo`

Nếu các thành phần của bạn thực hiện các thao tác tốn kém về mặt tính toán dựa trên state, hãy sử dụng React.useMemo để memoize kết quả. Điều này tránh việc chạy lại tính toán trừ khi các dependencies thay đổi. Điều này rất quan trọng đối với hiệu suất trong các ứng dụng lớn hoặc những ứng dụng có logic phức tạp.

            
import React, { useReducer, useMemo } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { items: [1, 2, 3, 4, 5] });

  const total = useMemo(() => {
    console.log('Calculating total...'); // This will only log when the dependencies change
    return state.items.reduce((sum, item) => sum + item, 0);
  }, [state.items]); // Dependency array: recalculate when items change

  return (
    <div>
      <p>Total: {total}</p>
      {/* ... other components ... */}
    </div>
  );
}

            

              
                Copy
              
            
          

Ví Dụ Thực Tế về useReducer

Hãy cùng xem xét một số trường hợp sử dụng thực tế của useReducer để minh họa tính linh hoạt của nó. Các ví dụ này phù hợp với các nhà phát triển trên toàn thế giới, trên các loại dự án khác nhau.

1. Quản Lý State Biểu Mẫu

Biểu mẫu là một thành phần phổ biến của bất kỳ ứng dụng nào. useReducer là một cách tuyệt vời để xử lý state biểu mẫu phức tạp, bao gồm nhiều trường nhập liệu, xác thực và logic gửi biểu mẫu. Mô hình này thúc đẩy khả năng bảo trì và giảm mã lặp.

            
import React, { useReducer } from 'react';

function formReducer(state, action) {
  switch (action.type) {
    case 'change':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'submit':
      //Perform submission logic (API calls, etc.)
      return state;
    case 'reset':
      return {name: '', email: '', message: ''};
    default:
      return state;
  }
}

function ContactForm() {
  const [state, dispatch] = useReducer(formReducer, { name: '', email: '', message: '' });

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch({type: 'submit'});
    // Example API Call (Conceptual)
    // fetch('/api/contact', { method: 'POST', body: JSON.stringify(state) });
    alert('Form submitted (conceptually)!')
    dispatch({type: 'reset'});
  };

  const handleChange = (event) => {
    dispatch({ type: 'change', field: event.target.name, value: event.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" value={state.name} onChange={handleChange} />

      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" value={state.email} onChange={handleChange} />

      <label htmlFor="message">Message:</label>
      <textarea id="message" name="message" value={state.message} onChange={handleChange} />

      <button type="submit">Submit</button>
    </form>
  );
}

export default ContactForm;

            

              
                Copy
              
            
          

Ví dụ này quản lý hiệu quả trạng thái của các trường biểu mẫu và xử lý cả thay đổi đầu vào lẫn gửi biểu mẫu. Lưu ý hành động `reset` để đặt lại biểu mẫu sau khi gửi thành công. Đây là một triển khai ngắn gọn và dễ hiểu.

2. Triển Khai Giỏ Hàng

Các ứng dụng thương mại điện tử, vốn phổ biến trên toàn cầu, thường bao gồm việc quản lý giỏ hàng. useReducer là một lựa chọn tuyệt vời để xử lý sự phức tạp của việc thêm, xóa và cập nhật các mặt hàng trong giỏ hàng.

            
function cartReducer(state, action) {
  switch (action.type) {
    case 'add_item':
      const existingItemIndex = state.items.findIndex(item => item.id === action.payload.id);
      if (existingItemIndex !== -1) {
        // If item exists, increment the quantity
        const updatedItems = [...state.items];
        updatedItems[existingItemIndex] = { ...updatedItems[existingItemIndex], quantity: updatedItems[existingItemIndex].quantity + 1 };
        return { ...state, items: updatedItems };
      }
      return { ...state, items: [...state.items, { ...action.payload, quantity: 1 }] };
    case 'remove_item':
      return { ...state, items: state.items.filter(item => item.id !== action.payload) };
    case 'update_quantity':
      const itemIndex = state.items.findIndex(item => item.id === action.payload.id);
      if (itemIndex !== -1) {
        const updatedItems = [...state.items];
        updatedItems[itemIndex] = { ...updatedItems[itemIndex], quantity: action.payload.quantity };
        return { ...state, items: updatedItems };
      }
      return state;
    case 'clear_cart':
      return { ...state, items: [] };
    default:
      return state;
  }
}

function ShoppingCart() {
  const [state, dispatch] = React.useReducer(cartReducer, { items: [] });

  const handleAddItem = (item) => {
    dispatch({ type: 'add_item', payload: item });
  };

  const handleRemoveItem = (itemId) => {
    dispatch({ type: 'remove_item', payload: itemId });
  };

  const handleUpdateQuantity = (itemId, quantity) => {
    dispatch({ type: 'update_quantity', payload: {id: itemId, quantity} });
  }

  // Calculate total
  const total = React.useMemo(() => {
    return state.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }, [state.items]);

  return (
    <div>
      <h2>Shopping Cart</h2>
      {state.items.length === 0 && <p>Your cart is empty.</p>}
      <ul>
        {state.items.map(item => (
          <li key={item.id}>
            {item.name} - ${item.price} x {item.quantity} = ${item.price * item.quantity}
            <button onClick={() => handleRemoveItem(item.id)}>Remove</button>
            <input type="number" min="1" value={item.quantity} onChange={(e) => handleUpdateQuantity(item.id, parseInt(e.target.value))} />
          </li>
        ))}
      </ul>
      <p>Total: ${total}</p>
      <button onClick={() => dispatch({ type: 'clear_cart' })}>Clear Cart</button>
      {/* ... other components ... */}
    </div>
  );
}

            

              
                Copy
              
            
          

Reducer giỏ hàng quản lý việc thêm, xóa và cập nhật các mặt hàng cùng số lượng của chúng. Hook React.useMemo được sử dụng để tính toán tổng giá một cách hiệu quả. Đây là một ví dụ phổ biến và thực tế, bất kể vị trí địa lý của người dùng.

3. Triển Khai Chuyển Đổi Đơn Giản với State Bền Vững

Ví dụ này minh họa cách kết hợp useReducer với local storage để có state bền vững. Người dùng thường mong đợi cài đặt của họ được ghi nhớ. Mô hình này sử dụng local storage của trình duyệt để lưu trạng thái chuyển đổi, ngay cả sau khi trang được làm mới. Điều này hoạt động tốt cho chủ đề, tùy chọn người dùng và nhiều hơn nữa.

            
import React, { useReducer, useEffect } from 'react';

// Reducer function
function toggleReducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isOn: !state.isOn };
    default:
      return state;
  }
}

function ToggleWithPersistence() {
  // Retrieve the initial state from local storage or default to false
  const [state, dispatch] = useReducer(toggleReducer, { isOn: JSON.parse(localStorage.getItem('toggleState')) || false });

  // Use useEffect to save the state to local storage whenever it changes
  useEffect(() => {
    localStorage.setItem('toggleState', JSON.stringify(state.isOn));
  }, [state.isOn]);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isOn ? 'On' : 'Off'}
      </button>
      <p>Toggle is: {state.isOn ? 'On' : 'Off'}</p>
    </div>
  );
}

export default ToggleWithPersistence;

            

              
                Copy
              
            
          

Thành phần đơn giản này chuyển đổi một state và lưu state vào `localStorage`. Hook useEffect đảm bảo rằng state được lưu trên mọi cập nhật. Mô hình này là một công cụ mạnh mẽ để bảo toàn cài đặt người dùng qua các phiên, điều này rất quan trọng trên toàn cầu.

Khi Nào Nên Chọn useReducer Thay vì useState

Việc quyết định giữa useReducer và useState phụ thuộc vào độ phức tạp của state và cách nó thay đổi. Dưới đây là hướng dẫn giúp bạn đưa ra lựa chọn đúng đắn:

• Chọn useReducer khi:
• Logic state của bạn phức tạp và liên quan đến nhiều giá trị con.
• State tiếp theo phụ thuộc vào state trước đó.
• Bạn cần quản lý các cập nhật state liên quan đến nhiều hành động.
• Bạn muốn tập trung logic state và làm cho việc gỡ lỗi dễ dàng hơn.
• Bạn dự đoán cần mở rộng ứng dụng hoặc tái cấu trúc quản lý state sau này.
• Chọn useState khi:
• State của bạn đơn giản và đại diện cho một giá trị duy nhất.
• Các cập nhật state đơn giản và không phụ thuộc vào state trước đó.
• Bạn có số lượng cập nhật state tương đối nhỏ.
• Bạn muốn một giải pháp nhanh chóng và dễ dàng cho việc quản lý state cơ bản.

Theo quy tắc chung, nếu bạn thấy mình đang viết logic phức tạp trong các hàm cập nhật useState của mình, đó là một dấu hiệu tốt cho thấy useReducer có thể phù hợp hơn. Hook useReducer thường mang lại mã sạch hơn và dễ bảo trì hơn trong các tình huống có chuyển đổi state phức tạp. Nó cũng có thể giúp mã của bạn dễ kiểm thử đơn vị hơn, vì nó cung cấp một cơ chế nhất quán để thực hiện các cập nhật state.

Các Thực Hành Tốt Nhất và Cân Nhắc

Để tận dụng tối đa useReducer, hãy ghi nhớ những thực hành tốt nhất và các cân nhắc sau:

• Tổ Chức Action: Xác định các loại action của bạn dưới dạng hằng số (ví dụ: `const INCREMENT = 'increment';`) để tránh lỗi chính tả và làm cho mã của bạn dễ bảo trì hơn. Cân nhắc sử dụng mô hình action creator để đóng gói việc tạo action.
• Kiểm Tra Kiểu (Type Checking): Đối với các dự án lớn hơn, hãy cân nhắc sử dụng TypeScript để định kiểu cho state, action và hàm reducer của bạn. Điều này sẽ giúp ngăn ngừa lỗi và cải thiện khả năng đọc, bảo trì mã.
• Kiểm Thử: Viết các bài kiểm thử đơn vị cho các hàm reducer của bạn để đảm bảo chúng hoạt động đúng và xử lý các kịch bản action khác nhau. Điều này rất quan trọng để đảm bảo rằng các cập nhật state của bạn có thể dự đoán và đáng tin cậy.
• Giám Sát Hiệu Suất: Sử dụng các công cụ dành cho nhà phát triển trình duyệt (như React DevTools) hoặc các công cụ giám sát hiệu suất để theo dõi hiệu suất của các thành phần của bạn và xác định bất kỳ tắc nghẽn nào liên quan đến cập nhật state.
• Thiết Kế Cấu Trúc State: Cẩn thận thiết kế cấu trúc state của bạn để tránh lồng ghép hoặc phức tạp không cần thiết. Một state được cấu trúc tốt sẽ giúp dễ hiểu và quản lý hơn.
• Tài Liệu Hóa: Ghi lại các hàm reducer và loại action của bạn một cách rõ ràng, đặc biệt trong các dự án cộng tác. Điều này sẽ giúp các nhà phát triển khác hiểu mã của bạn và làm cho việc bảo trì dễ dàng hơn.
• Cân Nhắc Các Giải Pháp Thay Thế (Redux, Zustand, v.v.): Đối với các ứng dụng rất lớn với các yêu cầu state cực kỳ phức tạp, hoặc nếu nhóm của bạn đã quen thuộc với Redux, bạn có thể muốn cân nhắc sử dụng một thư viện quản lý state toàn diện hơn. Tuy nhiên, useReducer và Context API cung cấp một giải pháp mạnh mẽ mà không cần thêm sự phức tạp của các thư viện bên ngoài.

Kết Luận

Hook useReducer của React là một công cụ mạnh mẽ và linh hoạt để quản lý state phức tạp trong ứng dụng của bạn. Bằng cách hiểu các nguyên tắc cơ bản của nó, nắm vững các mô hình nâng cao và triển khai các kỹ thuật tối ưu hóa hiệu suất, bạn có thể xây dựng các thành phần React mạnh mẽ, dễ bảo trì và hiệu quả hơn. Hãy nhớ điều chỉnh phương pháp của bạn dựa trên nhu cầu của dự án. Từ việc quản lý các biểu mẫu phức tạp đến xây dựng giỏ hàng và xử lý các tùy chọn bền vững, useReducer trao quyền cho các nhà phát triển trên toàn thế giới để tạo ra các giao diện tinh vi và thân thiện với người dùng. Khi bạn đi sâu hơn vào thế giới phát triển React, việc nắm vững useReducer sẽ chứng tỏ là một tài sản vô giá trong bộ công cụ của bạn. Hãy nhớ luôn ưu tiên sự rõ ràng và khả năng bảo trì mã để đảm bảo rằng các ứng dụng của bạn luôn dễ hiểu và phát triển theo thời gian.