小編精選 - 技術文章翻譯 · 03月09日

在 React 中編寫乾淨、可重複使用的元件（最佳實踐）

🔑 關鍵概念

什麼是可重複使用的 React 元件？您可以將它們視為建置塊。

它們是獨立的程式碼片段，可以在整個網站中重複使用，以節省您的時間和精力。

它們可以是從簡單按鈕到複雜表單的任何內容。

為什麼要使用可重複使用的元件？

隨著您的網站的發展，您可以透過組合現有元件輕鬆加入新功能。這使您的程式碼更具可擴展性和適應性。

您可以在未來的專案中使用可重複使用的程式碼，而無需從頭開始重新編寫。

🧩 如何寫出乾淨、可重複使用的 React 元件

在編寫乾淨的可重複使用 React 元件時，需要記住以下兩個最重要的事情：

React 可重複使用元件的圖像

1. 🩼避免副作用。不要將與外部資料互動的邏輯（例如進行 API 呼叫）直接放入可重複使用元件中。相反，將此邏輯作為props傳遞給元件。

例如，如果一個按鈕不僅僅是看起來漂亮，例如從網路獲取資料，那麼它可能無法重複使用。

在您掌握透過最佳實踐傳遞 props 的概念之前，我不會向您展示這方面的範例。繼續閱讀。

這是一個可重複使用的按鈕元件。但它缺乏最佳實踐。我將在範例部分向您展示原因。

// This is a reusable button component (bad practice!)
const Button = () => {
  return (
    <button> Click Me </button>
  );
}

‍

2. 🗃️使用 props。 Props 是傳遞給元件以自訂其行為和外觀的參數。這允許您將相同的元件用於不同的目的。

// This is a button component that can change its color
const Button = ({ color }) => {
  return (
    <button style={{ backgroundColor: color }}> Click Here </button>
  );
}

這仍然是一個不好的做法，因為您有一個名為「點擊這裡」的固定標籤。如果您想更改按鈕上的文本，例如“註冊”，那麼您必須返回按鈕元件並進行更改。

這意味著每次我們想要使用不同的文字時，我們都必須返回並編輯程式碼。換句話說，它不再可重複使用。

💪 挑戰：那麼解決方案是什麼？

你已經有了答案。但如果您不這樣做，我將在範例部分向您展示。

🌴提示：考慮一下您可能希望如何在不同情況下使用該元件，並將其設計得靈活且適應性強。

🍃可重複使用 React 元件的範例

以下是可重複使用 React 元件的一些常見範例，以及一些幫助您入門的程式碼範例：

1. 按鈕：具有不同樣式和功能的基本按鈕。

// Button component
import React from "react";

const Button = ({ color, label, onClick }) => {
  return (
    <button
      className={`padding-2 shadow-none hover:shadow background-light-${color} hover:background-dark-${color}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

export default Button;

// Using the Button component
<Button color="blue" label="Click Here" onClick={() => console.log("Button clicked!")} />

正如你所看到的，我沒有在按鈕元件中寫“Click Here”。我想讓我的按鈕可重複使用，因此它不知道有關自訂樣式或文字的任何資訊。

因此，我將它們作為 props（例如，顏色、標籤、onClick）傳遞，以便將來更改它們，而無需觸摸原始按鈕元件。希望這能說清楚。

🪜解決方案：您需要將每個功能作為可重複使用元件中的props傳遞 - 就是這樣。

2. 導覽列：在整個網站上提供一致導覽的導覽列。

// Navbar component
import React from "react";

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <div className="navbar-container">
        <div className="navbar-logo">
          <img src={logo} alt="logo" />
        </div>
        <div className="navbar-links">
          <a href="/">Home</a>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
          {isLoggedIn ? (
            <a href="/profile">Profile</a>
          ) : (
            <a href="/login">Login</a>
          )}
        </div>
      </div>
    </div>
  );
};

export default Navbar;

// Using the Navbar component
<Navbar isLoggedIn={true} />

如您所見，我通過了<Navbar isLoggedIn={true} />

此行利用Navbar元件並傳遞值為 true 的isLoggedIn屬性，表示使用者已登入。這將顯示「個人資料」連結並隱藏「登入」連結。

與按鈕元件類似，導覽列元件是可重複使用的，並接受 props 來自訂其行為。完美的！

3. 為什麼在按鈕元件中呼叫 API 是不好的做法

現在，您已經了解了 React 中可重複使用元件的所有內容。

讓我們透過解決一個複雜的問題來更深入地研究。

考慮這樣的場景，您有一個執行 API 呼叫的按鈕。按鈕元件的程式碼可以如下：

import React from "react"; 
import doAPICall from "../api"

const SaveButton  = () => {
  return (
    <button
      onClick={() => {
        doAPICall();
      }}
    >
      Save
    </button>
  );
}

export default SaveButton

很明顯，您不能在多個地方重複使用上述按鈕，因為該按鈕元件內部包含副作用（ doAPICall() ）。

為了使該元件可重複使用，首先，您必須提取副作用並將其作為 prop 傳遞給按鈕元件，如下所示：

const App = () =>  {
  function doAPICall() {
    // Does an API call to save the current state of the app.
  }

  return (
    <div>
      <SaveButton onClick={doAPICall}/>
    </div>
  )
}

按鈕元件將如下所示：

const SaveButton  = ({
  onClick
}) => {
  return (
    <button
      onClick={onClick}
    >
      Save
    </button>
  );
}

正如您所看到的，現在可以在您想要透過點擊按鈕儲存資料的所有位置重複使用上面的按鈕。該按鈕現在可以在多個地方像這樣使用：

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser}/>
      <SaveButton onClick={saveProject}/>
    </div>
  )
}

您也可以透過使用 prop 來控制標籤，使按鈕元件更具可重複使用性，如下所示：

const App = () =>  {
  function saveUser() {
    // Does an API call to save the user.
  }

  function saveProject() {
    // Does an API call to save the project.
  }

  return (
    <div>
      <SaveButton onClick={saveUser} label="Save user"  />
      <SaveButton onClick={saveProject} label="Save project" />
    </div>
  )
}

按鈕元件將如下所示：

const SaveButton  = ({
  onClick,
  label
}) => {
  return (
    <button
      onClick={onClick}
    >
      {label}
    </button>
  );
}

🫧 推薦：🤖🦾 Figma AI：

如果您需要快速設計簡報或網站，Figma AI 可以提供現成的範本。並且它可以與Figma順利配合。只要告訴它你想要什麼，畫一點，然後繁榮——你的想法就變成現實了！

Figma AI 影像

您可以嘗試Figma AI ，目前它對所有人免費。

👏結論

恭喜！您已經成功學習如何使用最佳實踐建立乾淨的可重複使用 React 元件。

請記住，可重複使用元件是健壯的 React 開發的建置塊。透過練習可重複使用元件，您可以建立更乾淨、更有效率、更易於維護的 React 應用程式。

您練習得越多，您就越能更好地辨識在專案中使用它們的機會！

如果您喜歡這篇文章，您可能也會喜歡我的𝕏帳戶，以了解更多有關前端開發的課程。

0個讚 0留言 545瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。