可維護性是我們在實際開發(fā)系統(tǒng)時，需要認(rèn)真考慮的的一個重要方面。它決定了系統(tǒng)修改、修復(fù)和更新的難易程度。只有當(dāng)所有組件都得到良好維護并且軟件項目沒有什么不同時，系統(tǒng)才會以最佳方式運行。

如果您的項目具有可維護高的良好架構(gòu)，開發(fā)人員可以輕松了解項目并進行準(zhǔn)確的更改以獲得性能，同時縮短開發(fā)、測試和發(fā)布周期。

項目的架構(gòu)是決定項目組件維護難易程度的關(guān)鍵因素。分層架構(gòu)是為 React 等前端框架編寫可維護組件的最佳架構(gòu)之一。

因此，本文將討論如何使用分層架構(gòu)在 React 中編寫易于維護的組件以及您應(yīng)該避免的錯誤。

什么是分層架構(gòu)，為什么要使用它？

分層架構(gòu)是一種軟件設(shè)計模式，它將應(yīng)用程序組織成多個層或?qū)?，每個層都有一組特定的職責(zé)。這些層按層次組織，較高層依賴較低層的功能。大多數(shù)分層架構(gòu)具有三個或四個標(biāo)準(zhǔn)層。

在分層架構(gòu)中，每一層都可以獨立開發(fā)和測試，改變一層不會影響其他層。這種分離允許開發(fā)人員創(chuàng)建更易于維護和更新的有組織、模塊化和可擴展的系統(tǒng)。 

此外，這種方法允許對應(yīng)用程序進行更改而無需重寫大部分代碼，從而降低引入錯誤或破壞現(xiàn)有功能的風(fēng)險。

讓我們以 3 層架構(gòu)為例，看看它如何改善開發(fā)體驗。

三層架構(gòu)

顧名思義，三層架構(gòu)由三個主要層組成：

• 表現(xiàn)層
• 業(yè)務(wù)邏輯層
• 數(shù)據(jù)訪問層

表示層管理用戶交互并將數(shù)據(jù)呈現(xiàn)給用戶。該層可以采用 Web 界面、桌面應(yīng)用程序或移動應(yīng)用程序的形式。它與業(yè)務(wù)邏輯層通信以執(zhí)行操作和檢索數(shù)據(jù)。

業(yè)務(wù)邏輯層負(fù)責(zé)實施應(yīng)用程序的業(yè)務(wù)規(guī)則和工作流。該層應(yīng)該完全獨立于表示層并且不了解用戶界面。它應(yīng)該包含所有應(yīng)用程序邏輯和算法，并與數(shù)據(jù)訪問層通信以檢索所需的數(shù)據(jù)。

數(shù)據(jù)訪問層負(fù)責(zé)與應(yīng)用程序的數(shù)據(jù)源進行交互。該層負(fù)責(zé)數(shù)據(jù)的檢索和存儲，應(yīng)與業(yè)務(wù)邏輯層分開。它應(yīng)該包括與數(shù)據(jù)庫訪問、API 調(diào)用和其他外部數(shù)據(jù)源相關(guān)的所有代碼。

如何在 React 中使用三層架構(gòu)

現(xiàn)在讓我們看看如何將分層架構(gòu)原則應(yīng)用到我們的 React 應(yīng)用程序中。

數(shù)據(jù)訪問層

該層通常實現(xiàn)為一組實用函數(shù)，可以被各種自定義 Hooks 重用?？紤]以下用于檢索 API 數(shù)據(jù)的 fetchData() 實用程序函數(shù)。

export default async function fetchData() {
  const response = fetch('https://jsonplaceholder.typicode.com/users/1').then(
    (res) => {
      if (res.ok) return res.json();
      return Promise.reject(res);
    }
  );
  return response;
}

每當(dāng)您需要檢索 API 數(shù)據(jù)而無需編寫重復(fù)代碼時，都可以在業(yè)務(wù)邏輯層中使用此功能。您可以用道具替換獲取 URL，并隨著項目的增長根據(jù)需要修改功能。在測試 API 調(diào)用時，您可以使用模擬數(shù)據(jù)調(diào)用此函數(shù)以簡化過程。

業(yè)務(wù)邏輯層

該層通常實現(xiàn)為一組可以跨組件重用的自定義 Hook?？紤]以下 useUserData() 自定義 Hook，它用于檢索用戶數(shù)據(jù)。

import React from "react";
import fetchData from "../util/fetchData";


const useUserData = () => {
  const [userData, setUserData] = useState([]);
  useEffect(() => {
    fetchData()
      .then((data) => setUserData(data))
      .catch((res) => console.error(res.status));
  }, []);
  return [userData];
};


export default useUserData;

如您所見，此處調(diào)用了數(shù)據(jù)訪問層的 fetchData() 函數(shù)。為了使這個鉤子更易于重用，將 URL 路徑作為 prop 傳遞給自定義 Hook，并將其傳遞給 fetchData() 函數(shù)。

表示層

表示層應(yīng)該包含負(fù)責(zé)呈現(xiàn)數(shù)據(jù)和響應(yīng) React 應(yīng)用程序中的用戶操作的所有 UI 組件。這些組件中不應(yīng)有業(yè)務(wù)邏輯或數(shù)據(jù)獲取代碼。

查看下面的 UserProfile 組件示例。

import React from "react";
import useUserData from "./customHooks/useUserData";


const UserProfile = () => {
  const [userData] = useUserData();
  return (
    <div>
      {userData.id ? (
        <div>
          <ul> {userData.name} </ul>
          <ul> {userData.email} </ul>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}


export default UserProfile;

組件中使用useUserData()自定義Hook與業(yè)務(wù)邏輯層通信，獲取用戶數(shù)據(jù)展示給用戶。除了返回函數(shù)，唯一應(yīng)該包含在 UI 組件中的是業(yè)務(wù)邏輯層的函數(shù)調(diào)用，如本例所示。

這為您提供了清晰干凈的 UI 組件，使查找和修復(fù)與 UI 相關(guān)的錯誤變得更加容易。下面的存儲庫鏈接將帶您到完整的 React 分層架構(gòu)示例項目。

GitHub：https://github.com/Manusha17/layered-architecture-example-project

使用分層架構(gòu)時要避免的錯誤

• 過度工程——保持簡單且可擴展的架構(gòu)，避免使用不遵循 React 模式的設(shè)計，例如基于繼承的設(shè)計。
• 緊耦合——當(dāng)層緊密耦合時，在不影響其他層的情況下更改一個層可能很困難。通過使用適當(dāng)?shù)哪Ｊ胶图夹g(shù)（例如依賴注入和接口）來減少耦合。
• 忽略性能——如果實施不當(dāng)，分層架構(gòu)會影響應(yīng)用程序性能。在優(yōu)化架構(gòu)以提高性能時，請考慮代碼拆分、延遲加載和緩存等因素。
• 糟糕的命名約定——為你的層、組件和函數(shù)使用清晰一致的命名約定。否則，從長遠(yuǎn)來看，開發(fā)人員將很難理解和維護代碼。
• 缺乏測試——每一層都應(yīng)該進行徹底的測試，以確保它按預(yù)期工作。未能測試每一層可能會導(dǎo)致最終應(yīng)用程序中出現(xiàn)錯誤和其他問題。
• 缺乏凝聚力——每一層都具有高度的凝聚力。內(nèi)聚性是指一個層內(nèi)的功能和職責(zé)的相關(guān)程度。低內(nèi)聚性會導(dǎo)致代碼難以理解和維護。

結(jié)論

作為 Web 開發(fā)框架，React 不強制執(zhí)行特定的架構(gòu)。因此，開發(fā)人員有責(zé)任選擇合適的體系結(jié)構(gòu)，從長遠(yuǎn)來看可以提高代碼的可維護性。本文探討了使用分層架構(gòu)來創(chuàng)建高度可維護的 React 組件，以及我們應(yīng)該避免的常見錯誤有哪些。

我希望本文能幫助您使用分層架構(gòu)構(gòu)建維護良好的可擴展 React 應(yīng)用程序。

感謝您的閱讀。