🔑 關鍵概念

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

它們是您可以在網站的不同部分使用的程式碼片段,以節省時間。它們可以是從簡單按鈕到複雜表單的任何內容。

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

它們可以輕鬆加入新功能並提高程式碼的可擴展性。另外,您可以在未來的專案中使用它們而無需重寫。


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

兩個關鍵點:

1. 避免副作用:不要在元件中直接包含與外部資料互動的邏輯(例如 API 呼叫)。相反,將此邏輯作為props傳遞。

簡單但不可重複使用的按鈕範例:

const Button = () => {
  return (
    <button>Click Me</button>
  );
}

該按鈕缺乏靈活性,因為文字是硬編碼的。

2. 使用 Props: Props 是傳遞給元件以對其進行自訂的參數。

更好的按鈕範例:

const Button = ({ color, label }) => {
  return (
    <button style={{ backgroundColor: color }}>{label}</button>
  );
}

此按鈕可以有不同的顏色和標籤,使其更易於重複使用。

挑戰:

考慮如何在不同情況下使用您的元件,並將其設計得靈活。


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

1. 按鈕:自訂不同樣式和功能的按鈕。

const Button = ({ color, label, onClick }) => {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {label}
    </button>
  );
};

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

2. 導覽列:整個網站的一致導覽。

const Navbar = ({ isLoggedIn }) => {
  return (
    <div className="navbar">
      <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>
  );
};

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

3. 為什麼要避免在元件中呼叫 API

在元件中包含 API 呼叫等副作用會降低可重複使用性。將副作用作為 prop 傳遞:

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

// Using SaveButton
<SaveButton onClick={saveUser} label="Save User" />
<SaveButton onClick={saveProject} label="Save Project" />

在沒有適當可視化的情況下建立元件可能會讓人不知所措。對於設計而言,Figma 是開發人員用來建立網頁設計元件和原型的絕佳工具。它因其簡潔的用戶介面和協作功能而廣受歡迎。您可以在這裡免費註冊

菲格瑪


👏 結論

恭喜!您已經學習如何建立乾淨、可重複使用的 React 元件。它們是穩健 React 開發的基礎。您練習得越多,您就越能在專案中更好地使用它們。

如果你喜歡這個,請關注我𝕏以獲取更多前端開發技巧。

閱讀更多:前端開發的未來


原文出處:https://dev.to/codewithshahan/lets-practice-clean-reusable-components-in-react-5flj


共有 0 則留言