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

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

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

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

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

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

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

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

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

三層架構(gòu)

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

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

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

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

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

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

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

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

該層通常實(shí)現(xiàn)為一組實(shí)用函數(shù)，可以被各種自定義 Hooks 重用?？紤]以下用于檢索 API 數(shù)據(jù)的 fetchData() 實(shí)用程序函數(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ù)代碼時(shí)，都可以在業(yè)務(wù)邏輯層中使用此功能。您可以用道具替換獲取 URL，并隨著項(xiàng)目的增長(zhǎng)根據(jù)需要修改功能。在測(cè)試 API 調(diào)用時(shí)，您可以使用模擬數(shù)據(jù)調(diào)用此函數(shù)以簡(jiǎn)化過程。

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

該層通常實(shí)現(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ù)。為了使這個(gè)鉤子更易于重用，將 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)的錯(cuò)誤變得更加容易。下面的存儲(chǔ)庫(kù)鏈接將帶您到完整的 React 分層架構(gòu)示例項(xiàng)目。

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

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

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

結(jié)論

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

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

感謝您的閱讀。