首頁 >web前端 >js教程 >創建可重複使用的反應組件的實用指南

創建可重複使用的反應組件的實用指南

Christopher Nolan原創: 2025-02-09 12:46:16694瀏覽

創建可重複使用的反應組件的實用指南

儘管React是世界上最受歡迎，最常用的前端框架之一，但許多開發人員在重構代碼以提高可重複性時仍在掙扎。如果您曾經發現自己在整個React應用程序中都重複了相同的代碼段，那麼您就可以使用正確的文章。

> 在本教程中，您將向您介紹三個最常見的指標，即該建立可重複使用的反應組件了。然後，我們將繼續通過構建可重複使用的佈局和兩個令人興奮的React掛鉤來查看一些實用的演示。

>您完成閱讀時，當創建可重複使用的React組件是適當的時，您將能夠自己弄清楚

>如何做到。。 🎜> >本文假定對鉤子的基本知識。如果您想了解這些主題，我建議您查看“啟動React”指南和“ Intorduction tor React Hooks”。 > 鑰匙要點

識別可重複使用的機會：本文介紹了三個通用符號，表明需要創建可重複使用的反應組件：重複的CSS樣式用於包裝器，頻繁使用相同的事件偵聽器以及重複實現相同的GraphQl查詢或突變。該指南可幫助開發人員認識到他們何時可以將重複代碼抽象成可重複使用的組件，從而提高其應用程序的可維護性和可擴展性。

實用的演示和實現：通過詳細的示例，本文提供了有關構建可重複使用的組件的實用演示，包括佈局組件，用於管理事件偵聽器的自定義React掛鉤以及用於GraphQl查詢的掛鉤。這些示例是開發人員遵循的藍圖，使他們能夠在自己的項目中應用類似的模式來簡化開發並確保其應用程序的一致性。
可重複使用的反應組件的前三個指標
>
>時的某些跡象。用相同CSS樣式的包裝器重複創建包裝紙

我最喜歡知道何時創建可重複使用的組件的跡像是重複使用相同的CSS樣式。現在，您可能會想：“等一下：為什麼我不簡單地將相同的類名稱分配給共享相同CSS樣式的元素？”你絕對正確。每當不同組件中的某些元素共享相同樣式時，創建可重複使用的組件並不是一個好主意。實際上，它可能引入不必要的複雜性。因此，您必須再問自己一件事：這些常見樣式的元素
包裝器>？ >？例如，請考慮以下登錄頁和註冊頁：
>
```
// Login.js
import './common.css';

function Login() {
 return (
 <div className='wrapper'>
 <main>
 {...}
 </main>
 <footer className='footer'>
 {...}
 </footer>
 </div>
 );
}

```
>將相同的樣式應用於容器（
元素）和每個組件的頁腳。因此，在這種情況下，您可以創建兩個可重複使用的組件 - 和 - 並將孩子作為道具傳遞給他們。例如，可以對登錄組件進行重構如下：
```
// SignUp.js
import './common.css';

function Signup() {
 return (
 <div className='wrapper'>
 <main>
 {...}
 </main>
 <footer className='footer'>
 {...}
 </footer>
 </div>
 );
}

```
>
結果，您不再需要在多個頁面中導入common.css或創建相同的
元素來包裝所有內容。重複使用事件偵聽器
```
// Login.js
import Footer from "./Footer.js";

function Login() {
 return (
 <Wrapper main={{...}} footer={<Footer />} />
 );
} 

```
要將事件偵聽器附加到元素上，您可以在usefeft（）內部處理它：
>

>您可以直接在JSX中進行此操作，如以下按鈕組件中所示：
```
// App.js
import { useEffect } from 'react';

function App() {
 const handleKeydown = () => {
 alert('key is pressed.');
 }

 useEffect(() => {
 document.addEventListener('keydown', handleKeydown);
 return () => {
 document.removeEventListener('keydown', handleKeydown);
 }
 }, []);

 return (...);
}

```
>要將事件偵聽器添加到文檔或窗口時，您必須使用第一個方法。但是，正如您可能已經意識到的那樣，第一種方法需要使用usefeff（），addeventListener（）和removeeventListener（）（）使用更多代碼。因此，在這種情況下，創建自定義掛鉤將使您的組件更加簡潔。
>
有四種可能使用事件偵聽器的情況：
```
// Button.js
function Button() {
 return (
 <button type="button" onClick={() => { alert('Hi!')}}>
 Click me!
 </button>
 );
};

```
>同一事件偵聽器，同一事件處理程序

同一事件偵聽器，不同的活動處理程序
- 不同的事件偵聽器，同一事件處理程序
- 不同的事件偵聽器，不同的事件處理程序
- 在第一種情況下，您可以創建一個掛鉤，其中偵聽器和事件處理程序都被定義。考慮以下鉤子：
- 然後，您可以在任何組件中使用此鉤子，如下所示：
在其他三種情況下，我建議創建一個接收事件和事件處理功能作為道具的鉤子。例如，我將把Keydown和Handle Keyve Down作為道具傳遞給我的自定義掛鉤。考慮以下鉤子：

然後，您可以在任何組件中使用此鉤子，如下所示：
```
// useEventListener.js
import { useEffect } from 'react';

export default function useKeydown() {
 const handleKeydown = () => {
 alert('key is pressed.');
 }

 useEffect(() => {
 document.addEventListener('keydown', handleKeydown);
 return () => {
 document.removeEventListener('keydown', handleKeydown);
 }
 }, []);
};

```
```
// Login.js
import './common.css';

function Login() {
 return (
 <div className='wrapper'>
 <main>
 {...}
 </main>
 <footer className='footer'>
 {...}
 </footer>
 </div>
 );
}

```
>重複使用同一GraphQl腳本

>在使GraphQl代碼重複使用時，您實際上不需要尋找符號。對於復雜的應用程序，用於查詢或突變的GraphQL腳本很容易占用30-50行代碼，因為有許多屬性需要請求。如果您多次或兩次使用相同的GraphQl腳本，我認為它值得擁有自己的自定義鉤。
考慮以下示例：
```
// SignUp.js
import './common.css';

function Signup() {
 return (
 <div className='wrapper'>
 <main>
 {...}
 </main>
 <footer className='footer'>
 {...}
 </footer>
 </div>
 );
}

```
>而不是在每個頁面中重複此代碼的後端請求帖子，而是應該為此特定的API創建一個React Hook：
>

構建三個可重複使用的反應組件
```
// Login.js
import Footer from "./Footer.js";

function Login() {
 return (
 <Wrapper main={{...}} footer={<Footer />} />
 );
} 

```
>現在，我們已經看到了一些
>創建可以在整個React應用程序中共享的新組件時的常見跡象，讓我們將這些知識付諸實踐並構建三個實用的演示。
1。佈局組件 React通常用於構建複雜的Web應用程序。這意味著需要在React中開發大量頁面，我懷疑應用程序的每個頁面都有不同的佈局。例如，由30頁組成的Web應用程序通常使用少於五個不同的佈局。因此，建立一個可以在許多不同頁面中使用的靈活，可重複使用的佈局至關重要。這將為您節省很多代碼行，並因此有大量的時間。 >
考慮以下反應功能組件：

這是一個典型的網頁，它具有，a 和。如果還有30個這樣的網頁，您會很容易地厭倦了反复編寫HTML標籤並一遍又一遍地應用相同的樣式。
>
>相反，您可以創建一個佈局組件，該組件像props一樣，接收
，和，如以下代碼：：
```
// App.js
import { useEffect } from 'react';

function App() {
 const handleKeydown = () => {
 alert('key is pressed.');
 }

 useEffect(() => {
 document.addEventListener('keydown', handleKeydown);
 return () => {
 document.removeEventListener('keydown', handleKeydown);
 }
 }, []);

 return (...);
}

```
此組件不需要
和。因此，您可以將相同的佈局用於頁面，而不管它們包含標頭還是頁腳。
使用此佈局組件，您可以將feed頁面變成更複雜的代碼塊：>

>用於創建帶有粘性元素的佈局的Pro提示

// Button.js function Button() { return ( <button type="button" onClick={() => { alert('Hi!')}}> Click me! </button> ); }; 
許多開發人員傾向於使用位置：固定或位置：絕對是要將標頭貼在視口頂部或頁腳到底部的人時。但是，在佈局的情況下，您應該嘗試避免這種情況。
>
>由於佈局的元素將是經過的道具的父元素，因此您希望將佈局元素的樣式保持盡可能簡單 - 因此，通過，或。按預期。因此，我建議應用位置：固定和顯示：flex tot to to佈局的最外部元素，並設置溢出y：滾動到 element。
。
這是一個示例：
// useEventListener.js import { useEffect } from 'react'; export default function useKeydown() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); }; 

// Login.js import './common.css'; function Login() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 

現在，讓我們在供稿頁面上應用一些樣式，看看您已經構建了什麼：

// SignUp.js import './common.css'; function Signup() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
>粘性標頭和頁腳演示

>這是行動中的代碼。
>

這就是桌面屏幕上的外觀。

這就是移動屏幕上的外觀。

>此佈局也按照iOS設備的意圖工作！如果您不知道，iOS臭名昭著，因為它將與位置相關的意外問題帶來了Web應用程序的開發。
2。事件聽眾

>通常，整個Web應用程序中使用了一次以上的事件偵聽器。在這種情況下，創建自定義React Hook是一個好主意。讓我們通過開發使用useCrollSaver Hook來了解如何執行此操作，該掛鉤將用戶設備的滾動位置保存在頁面上 - 因此用戶無需從頂部再次滾動。此掛鉤對於列出了許多元素（例如帖子和評論）的網頁將很有用。想像一下，沒有滾動節省的情況下Facebook，Instagram和Twitter的供稿頁面。
>讓我們分解以下代碼：>

>您可以看到usesCrollSaver Hook需要接收兩個項目：ScrollableDiv，它必須是一個可滾動容器，就像上面佈局中的容器一樣，PageUrl將用作頁面的標識符，因此您可以存儲多個頁面的滾動位置。

步驟1：保存滾動位置
// Login.js import Footer from "./Footer.js"; function Login() { return ( <Wrapper main={{...}} footer={<Footer />} /> ); } 

首先，您需要將“滾動”事件偵聽器綁定到可滾動容器：

現在，每次用戶滾動滾動時，都會運行稱為handlescroll的功能。在此功能中，您應該利用LocalStorage或SessionStorage來保存滾動位置。不同之處在於，LocalStorage中的數據不會到期，而頁面會話結束時會sessionStorage中的數據將被清除。您可以使用setItem（ID：String，value：string）將數據保存在任一存儲中：>
// Login.js import './common.css'; function Login() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 

>步驟2：還原滾動位置

>用戶回到網頁時，應將用戶直接定向到他或她以前的滾動位置 - 如果有的話。該位置數據當前保存在SessionStorage中，您需要將其取出並使用它。您可以使用GetItem（ID：String）從存儲中獲取數據。然後，您只需要將可滾動容器的滾動滾動式設置為此獲得的值：>

// SignUp.js import './common.css'; function Signup() { return ( <div className='wrapper'> <main> {...} </main> <footer className='footer'> {...} </footer> </div> ); } 
>步驟3：在任何網頁中使用uses crollsaver鉤

>現在您已經完成了自定義掛鉤，只要將兩個必需的項目傳遞到鉤子：scrollablediv和pageurl，就可以在任何網頁中使用掛鉤。讓我們回到layout.js，然後在其中使用鉤子。這將允許任何使用此佈局來享受您的滾動節省的網頁：>

scrollsaver demo
// Login.js import Footer from "./Footer.js"; function Login() { return ( <Wrapper main={{...}} footer={<Footer />} /> ); } 

>這是在沙箱中運行的代碼。嘗試滾動頁面，然後在左下角和角落使用箭頭重新加載應用程序。
>您會發現自己位於您關閉的位置！

3。查詢/突變（特定於GraphQl）
，如果您喜歡像我一樣將GraphQl與React一起使用，則可以通過為GraphQl查詢或突變創建React Hook進一步減少代碼庫。
>
考慮以下示例以運行GraphQl Query GetPosts（）：>

如果從後端請求越來越多的屬性，則您的GraphQL腳本將佔用越來越多的空間。因此，您可以創建以下React Hook：
然後，您可以使用usegetPosts（）掛鉤如下：

// App.js import { useEffect } from 'react'; function App() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); return (...); } 
結論
在本文中，您已經了解了可重複使用的反應組件的三個最常見指標和三種最受歡迎的用途案例。現在，當您可以創建可重複使用的反應組件時，您已經了解了
>的知識，並且
// Button.js function Button() { return ( <button type="button" onClick={() => { alert('Hi!')}}> Click me! </button> ); }; 
>如何輕鬆，專業地進行。您很快就會發現自己喜歡將代碼的重構行納入精緻的可重複使用的反應組件或鉤子中。使用這些重構技術，我們在Clay的開發團隊能夠將我們的代碼庫減少到可管理的尺寸。我也希望你也可以！
>

// useEventListener.js import { useEffect } from 'react'; export default function useKeydown() { const handleKeydown = () => { alert('key is pressed.'); } useEffect(() => { document.addEventListener('keydown', handleKeydown); return () => { document.removeEventListener('keydown', handleKeydown); } }, []); }; 
關於創建可重複使用的React組件的FAQ

react.js中的可重複使用的組件是什麼？
React.js中的可重複使用的組件是基本的構建塊，它封裝了特定的用戶界面（UI）功能，從而使以模塊化和高效方式構建應用程序成為可能。這些組件旨在在整個應用程序甚至在不同的項目中都使用，提供了大大簡化開發的代碼可重複性。他們通過封裝其邏輯和渲染來促進明顯的關注點，以確保其內部實施細節在應用程序的其餘部分中仍然隱藏了。這不僅可以增強代碼組織和可維護性，而且還可以使開發人員通過共享和重複使用團隊和項目的組件進行更協作的工作。
可重複使用的組件的主要優點之一就是他們保持在用戶界面中一致性的能力。通過在應用程序的不同部分中使用相同的組件，您可以確保外觀和感覺均勻，並遵守設計指南並創建更精緻的用戶體驗。這些組件通過道具進行了參數化，從而可以自定義和適應各種用例。此參數化功能在一致性和靈活性之間提供了平衡，從而使開發人員根據每個應用程序功能或頁面的特定要求來微調組件的行為和外觀。
可重用性不僅節省了時間和精力，而且還簡化了測試過程。隔離和封裝的組件更易於測試，您可以創建單元測試以驗證其正確性和功能。通過將可重複使用的組件納入您的反應應用程序，您可以建立可維護，模塊化和一致的代碼庫，最終提高開發效率並提高用戶界面的整體質量。

REACT中可重複使用的組件的示例是什麼？ REECT中可重複使用的組件的一個常見示例是“按鈕”組件。按鈕是用戶界面的基本組成部分，在整個應用程序中都用於各種交互。在React中創建可重複使用的按鈕組件可以使您在減少代碼重複時保持一致的外觀和行為。這是可重複使用的按鈕組件的一個簡單示例：

>從'react'';

const button =（{label，onclick，style}）=> { 🎜>
）;
};在此示例中，
>
導出默認按鈕;

在此示例中，按鈕組件被構造為功能組件，該功能組件採用三個關鍵道具：用於按鈕上顯示的文本的“標籤”，“ onclick”，for for for。點擊事件處理程序和可選的“樣式”道具，用於自定義按鈕的外觀。該組件封裝了按鈕的HTML結構和行為，使其在整個應用程序中都可以輕鬆地重複使用，而無需重複代碼。
>使用此按鈕組件的用法顯示其可重複使用性和靈活性。在父組件（在這種情況下為“應用程序”）中，您可以傳遞特定標籤文本，單擊事件處理功能和样式偏好，以創建具有不同目的和外觀的不同按鈕。通過使用此類可重複使用的組件，您可以維護統一的用戶界面樣式並提高代碼可維護性。這些組件可以擴展到按鈕之外，以包含更複雜的UI元素，例如輸入字段，卡片或導航欄，從而產生模塊化和可維護的React應用程序。可重複使用的組件不僅會加快開發的速度，而且會導致更一致，用戶友好的界面，該界面遵循設計準則和最佳實踐。 >
如何在React中創建可重複使用的組件？
在React.js中創建可重複使用的組件是構建模塊化和可維護應用程序的基礎實踐。該過程從一個明確的計劃開始，您可以在其中確定要封裝在組件中的特定功能或用戶界面（UI）元素。定義組件的目的後，您將在React項目中創建一個新的JavaScript/JSX文件。這是一個很好的做法，可以用大寫字母開始命名文件，並遵守React的命名慣例。
在此新組件文件中，您定義了組件的行為和渲染邏輯。組件可以根據您的需求而具有功能性或基於班級的功能。在參數化組件時，您將道具接受為輸入，這使您可以自定義其外觀和行為。使用Proptypes或Typescript定義道具類型可確保類型的安全性和清晰度，從而更容易理解應如何使用組件。構建組件後，就可以在應用程序的其他部分中使用。您可以導入並合併它，並通過特定的道具為每個用例配置其行為。

結果是一個更有條理的代碼庫，可鼓勵代碼可重複使用並保持一致的UI樣式。可重複使用的組件可以輕鬆地集成到應用程序的不同部分，提高開發效率，並為用戶友好和視覺上一致的用戶界面做出貢獻。 >
REACT中可重複使用的組件的好處是什麼？ React中可重複使用的組件可重複使用的組件提供了許多好處，可顯著增強開發過程和應用質量。它們通過將復雜的用戶界面分解為較小的，獨立的構件來促進模塊化，從而使代碼庫更有條理和可維護。這些組件側重於特定功能或UI元素，使開發人員能夠獨立管理和更新它們，從而降低了意外副作用的風險並簡化了開發過程。可重複使用的組件的主要優點是它們的可重複使用性，可以節省時間和時間和時間。努力。您可以在應用程序的各個部分或不同項目中使用相同的組件，從而消除了重寫相似代碼的需求。這不僅加速了開發，還可以確保一個一致的用戶界面。一致性是另一個關鍵好處。通過為特定的UI元素使用相同的組件，您可以保持統一的外觀和行為，遵守設計指南並改善用戶體驗。他們接受道具，使開發人員能夠對其行為和外觀進行微調以適合不同的用例。此參數化增強了組件的靈活性和多功能性。當出現問題時，這些孤立的組件易於測試和調試，從而有效地解決問題。此外，通過在項目之間共享和重複組件，團隊可以更有效地協作，保持統一的UI風格並確保代碼一致性，這對於大規模和長期開發工作至關重要。總而言之，React簡化開發中可重複使用的組件，鼓勵代碼可重複使用，保持UI一致性並提供可定制性，最終導致更有效，高質量的應用程序。
是什麼使React中的可重複使用的組件？反應中精心設計的可重複使用的成分錶現出多種關鍵特徵。首先，可重複使用性是核心屬性。這些組件應以在應用程序的不同部分甚至在單獨的項目中使用。為了實現這一目標，必須高度參數化，使開發人員可以通過道具自定義其外觀和行為。這種多功能性是使組件真正可重複使用的基本方面。
封裝同樣重要。可重複使用的組件應封裝其內部邏輯和渲染，從而將實現詳細信息從應用程序的其餘部分中屏蔽。這種關注點的分離導致更清潔，更模塊化的代碼並簡化集成。
模塊化是另一個關鍵屬性。良好的可重複使用的組件應該具有單一的目的，重點是特定功能或特定的UI元素。這種模塊化設計增強了代碼可維護性和調試效率。此外，易於測試至關重要。

最終，這些組件應保持清晰的API，指定他們接受的道具及其預期目的。這種清晰度可幫助其他開發人員了解如何有效使用組件。當將相同的組件用於特定的UI元素時，通過一致的用戶界面做出貢獻，它們可以確保具有凝聚力和用戶友好的應用程序。從本質上講，一個良好的可重複使用組件是可重新配置的，封裝的，模塊化的，易於測試的，並有助於代碼可維護性和UI一致性。
>

以上是創建可重複使用的反應組件的實用指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：5個使用微前端的陷阱以及如何避免它們下一篇：5個使用微前端的陷阱以及如何避免它們

看更多

創建可重複使用的反應組件的實用指南

>重複使用同一GraphQl腳本

>現在，我們已經看到了一些

>這是在沙箱中運行的代碼。嘗試滾動頁面，然後在左下角和角落使用箭頭重新加載應用程序。

>

如何在React中創建可重複使用的組件？

相關文章