🔑 關鍵概念
什麼是可重複使用的 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 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章