React組件的解耦技巧分享

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

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

前提

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

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

當(dāng)然是通過(guò)寫更少的代碼，來(lái)實(shí)現(xiàn)我們的功能需求啦，并且最好的話，是讓所有的代碼都能夠復(fù)用。

你可能會(huì)問(wèn)那要怎么樣才能實(shí)現(xiàn)代碼的復(fù)用呢？

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

你肯定會(huì)說(shuō)：說(shuō)起來(lái)容易做起來(lái)難，對(duì)吧？

如何有效地將組件解耦

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

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

耦合

在計(jì)算機(jī)科學(xué)中，耦合是指兩個(gè)或多個(gè)組件之間的依賴關(guān)系的概念。例如，如果組件A依賴于另一個(gè)組件B，那么就可以說(shuō)A與B耦合在一起。

耦合是我們提高代碼復(fù)用率的敵人，因?yàn)樗鼤?huì)將需要獨(dú)立修改的組件或部分聯(lián)系在一起，從而增加了代碼維護(hù)的難度。這意味著當(dāng)你需要修改其中一個(gè)部分時(shí)，可能會(huì)不得不同時(shí)修改其他部分，這會(huì)導(dǎo)致系統(tǒng)更容易出現(xiàn)錯(cuò)誤和問(wèn)題。

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

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

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

這種緊密的耦合在修改時(shí)可能會(huì)對(duì)系統(tǒng)的其他部分產(chǎn)生不可預(yù)測(cè)的副作用。

讓我們來(lái)看下面這個(gè)組件

import { useCustomerHook } from './hooks';

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

乍一看，好像一切都很好，但實(shí)際上，它有一個(gè)問(wèn)題：這個(gè)組件與useCustomerHook耦合在一起，該hook是從外部服務(wù)獲取客戶數(shù)據(jù)。因此，我們的Customer組件不是一個(gè)“純粹”的組件，因?yàn)樗蕾囉谂c其UI呈現(xiàn)無(wú)關(guān)的邏輯。

如果，讓我們想要讓useCustomerHook也在其他的組件中使用。那么我們就要對(duì)其進(jìn)行修改，這會(huì)讓我們修改相當(dāng)多的地方，工作量會(huì)很大，因?yàn)槲覀儽仨毿薷乃惺褂盟⑴c它耦合的組件。

解耦React組件的邏輯

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

那我們應(yīng)該怎么去解耦這個(gè)組件呢？讓他變成純粹的呈現(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;

我們可以使用了一個(gè)包裝組件來(lái)解耦Customer組件的邏輯。這種技巧被稱為容器組件，它允許我們修改組件的UI，而不必?fù)?dān)心“破壞”底層邏輯。

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

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

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

那我們可以怎么解決呢？我們可以通過(guò)使用Composition來(lái)解決這兩個(gè)問(wèn)題。

Composition

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

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

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

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

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

讓我們看看如何在我們的示例中應(yīng)用組合。

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組件確實(shí)是一個(gè)純粹的呈現(xiàn)組件。它與任何自定義鉤子都沒(méi)有耦合在一起，只處理UI邏輯。此外，您無(wú)需創(chuàng)建任何額外的組件來(lái)解耦邏輯。事實(shí)上，組合使您能夠創(chuàng)建更清晰和可讀性更強(qiáng)的組件。

這種技術(shù)的另一個(gè)優(yōu)點(diǎn)在于它如何簡(jiǎn)化對(duì)Customer組件的測(cè)試。您不必?fù)?dān)心測(cè)試業(yè)務(wù)邏輯；您只需要測(cè)試UI邏輯。此外，您還可以單獨(dú)測(cè)試自定義鉤子。

最后，讓我們看看如果您決定添加一個(gè)新的自定義鉤子，用于處理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);