React組件的解耦技巧分享

更新時間：2023年11月05日 15:14:00 作者：zayyo

本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復用性極高,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下

前提

每個程序員的夢想都是實現(xiàn)財富自由然后就可以不工作了，但是能實現(xiàn)的都是少數(shù)，但是如果在工作中摸魚賺錢，確實比較好實現(xiàn)的事。

那怎么實現(xiàn)呢？

當然是通過寫更少的代碼，來實現(xiàn)我們的功能需求啦，并且最好的話，是讓所有的代碼都能夠復用。

你可能會問那要怎么樣才能實現(xiàn)代碼的復用呢？

當然是正確地將組件的邏輯與其呈現(xiàn)分離開來。

你肯定會說：說起來容易做起來難，對吧？

如何有效地將組件解耦

接下來我們就一起來研究如何有效地將組件解耦，讓我們的代碼變的復用性極高。

在我們開始之前，讓我們看看“耦合”這一基本概念。

耦合

在計算機科學中，耦合是指兩個或多個組件之間的依賴關系的概念。例如，如果組件A依賴于另一個組件B，那么就可以說A與B耦合在一起。

耦合是我們提高代碼復用率的敵人，因為它會將需要獨立修改的組件或部分聯(lián)系在一起，從而增加了代碼維護的難度。這意味著當你需要修改其中一個部分時，可能會不得不同時修改其他部分，這會導致系統(tǒng)更容易出現(xiàn)錯誤和問題。

所以我們必須花時間去review所有需要進行修改相對應的部分，否則可能會引發(fā)很多我們未知的bug。

如果我們將React組件視為一個純粹的呈現(xiàn)元素，們可以說它可以與很多東西耦合：

決定其行為的業(yè)務邏輯（hooks、自定義hooks等）。
外部服務（API、數(shù)據(jù)庫等）。
另一個React組件（例如，負責管理表單狀態(tài)的組件）。

這種緊密的耦合在修改時可能會對系統(tǒng)的其他部分產生不可預測的副作用。

讓我們來看下面這個組件

import { useCustomerHook } from './hooks';

const Customer = () => {
  const { name, surname } = useCustomerHook();
  return (
    <div>
      <p>{name}</p>
      <p>{surname}</p>
    </div>
  );
};

乍一看，好像一切都很好，但實際上，它有一個問題：這個組件與useCustomerHook耦合在一起，該hook是從外部服務獲取客戶數(shù)據(jù)。因此，我們的Customer組件不是一個“純粹”的組件，因為它依賴于與其UI呈現(xiàn)無關的邏輯。

如果，讓我們想要讓useCustomerHook也在其他的組件中使用。那么我們就要對其進行修改，這會讓我們修改相當多的地方，工作量會很大，因為我們必須修改所有使用它并與它耦合的組件。

解耦React組件的邏輯

還是剛剛那個例子。Customer組件與自定義的 useCustomerHook耦合，該hook 應用了獲取客戶數(shù)據(jù)的邏輯。

那我們應該怎么去解耦這個組件呢？讓他變成純粹的呈現(xiàn)組件。

import { useCustomerHook } from './hooks';

const Customer = ({name, surname}) => {
  return (
    <div>
      <p>{name}</p>
      <p>{surname}</p>
    </div>
  );
};

const CustomerWrapper = () => {
  const { name, surname } = useCustomerHook();
  return <Customer name={name} surname={surname} />;
};

export default CustomerWrapper;

我們可以使用了一個包裝組件來解耦Customer組件的邏輯。這種技巧被稱為容器組件，它允許我們修改組件的UI，而不必擔心“破壞”底層邏輯。

現(xiàn)在，我們的Customer只需要關注顯示呈現(xiàn)信息。所有必要的變量都作為props傳遞，它就可以輕松嵌套在我們的代碼中的任何位置，而無需擔憂代碼耦合的問題。

雖然我們已經(jīng)成功解決，但是它仍然存在兩個問題

CustomerWrapper組件仍與自定義的hoos耦合。因此，如果我想要對它進行修改的話仍然需要修改包裝組件。
我們必須創(chuàng)建額外的組件CustomerWrapper來解耦邏輯，這意味著我們需要寫了更多的代碼了。

那我們可以怎么解決呢？我們可以通過使用Composition來解決這兩個問題。

Composition

在計算機科學中，Composition是一個概念，指的是將兩個或多個元素組合在一起以創(chuàng)建一個新元素。例如，如果我們有兩個函數(shù)f和g，我們可以將它們組合在一起以創(chuàng)建一個新的函數(shù)h，h是f和g的組合。

const f = (x) => x + 1;
const g = (x) => x * 2;
const h = (x) => f(g(x));

我們也可以將相同的概念應用于自定義hook上。事實上，我們可以將兩個或多個自定義hook組合在一起以創(chuàng)建一個新的自定義鉤hook。

const useCustomerHook = () => {
  const { name, surname } = useCustomer();
  const { age } = useCustomerAge();
  return { name, surname, age };
};

通過使用Composition，我們可以在不創(chuàng)建包裝組件的情況下解耦React組件的邏輯。為了方便地應用組合，我們可以使用了react-hooks-compose庫。

讓我們看看如何在我們的示例中應用組合。

import composeHooks from 'react-hooks-compose';
import { useCustomerHook } from './hooks';

const Customer = ({name, surname}) => {
  return (
    <div>
      <p>{name}</p>
      <p>{surname}</p>
    </div>
  );
};

export default composeHooks({useCustomerHook})(Customer);

現(xiàn)在，Customer組件確實是一個純粹的呈現(xiàn)組件。它與任何自定義鉤子都沒有耦合在一起，只處理UI邏輯。此外，您無需創(chuàng)建任何額外的組件來解耦邏輯。事實上，組合使您能夠創(chuàng)建更清晰和可讀性更強的組件。

這種技術的另一個優(yōu)點在于它如何簡化對Customer組件的測試。您不必擔心測試業(yè)務邏輯；您只需要測試UI邏輯。此外，您還可以單獨測試自定義鉤子。

最后，讓我們看看如果您決定添加一個新的自定義鉤子，用于處理Customer組件的某些邏輯，例如處理客戶信息記錄的自定義鉤子。

import composeHooks from 'react-hooks-compose';
import { useCustomerHook, useLoggerHook } from './hooks';

const Customer = ({name, surname, age}) => {
  return (
    <div>
      <p>{name}</p>
      <p>{surname}</p>
    </div>
  );
};

export default composeHooks({
  useCustomerHook,
  useLoggerHook
})(Customer);