Obwohl React eines der beliebtesten und am häufigsten verwendeten Front-End-Frontworks der Welt ist, haben viele Entwickler immer noch Schwierigkeiten, wenn es darum geht, Code für eine verbesserte Wiederverwendbarkeit neu zu verarbeiten. Wenn Sie jemals den gleichen Code -Ausschnitt in Ihrer React -App wiederholt haben, sind Sie zum richtigen Artikel gekommen.
In diesem Tutorial werden Sie mit den drei häufigsten Indikatoren eingeführt, dass es Zeit ist, eine wiederverwendbare React -Komponente zu erstellen. Dann werden wir uns einige praktische Demos ansehen, indem wir ein wiederverwendbares Layout und zwei aufregende React -Haken erstellen.
Wenn Sie mit dem Lesen fertig sind, können Sie selbst selbst herausfinden, wenn wieder wiederverwendbare React -Komponenten erstellt und wie , um dies zu tun.
Dieser Artikel setzt ein grundlegendes Wissen über React- und React -Hooks voraus. Wenn Sie diese Themen auffrischen möchten, empfehle ich Ihnen, sich mit dem Handbuch „Erste Schritte mit React“ und „Abhängigkeit von React Hooks“ anzusehen.
Ermittlung von Möglichkeiten zur Wiederverwendbarkeit: Der Artikel führt drei häufige Anzeichen ein, die darauf hinweisen, dass wiederverwendbare React -Komponenten erstellt werden müssen: Wiederholte CSS -Stile für Wrapper, häufige Verwendung identischer Ereignishörer und die wiederholte Implementierung derselben GraphQL -Abfragen oder -Mutationen. Diese Anleitung hilft den Entwicklern, zu erkennen, wann sie sich wiederverwendbaren Code in wiederverwendbare Komponenten abstrahieren können, und verbessert die Wartbarkeit und Skalierbarkeit ihrer Anwendungen.
Praktische Demonstrationen und Implementierungen: Durch detaillierte Beispiele bietet der Artikel praktische Demonstrationen zum Erstellen wiederverwendbarer Komponenten, einschließlich einer Layoutkomponente, benutzerdefinierten React -Hooks für die Verwaltung von Ereignishörern und Haken für GraphQL -Abfragen. Diese Beispiele dienen als Blaupause für Entwickler, sodass sie ähnliche Muster in ihren eigenen Projekten anwenden können, um die Entwicklung zu optimieren und die Konsistenz in ihren Anwendungen zu gewährleisten.
an, wenn Sie dies vielleicht tun möchten.
Mein Lieblingszeichen dafür, zu wissen, wann eine wiederverwendbare Komponente erstellt werden soll, ist die sich wiederholende Verwendung desselben CSS -Stils. Jetzt denken Sie vielleicht: "Warten Sie eine Minute: Warum weise ich Elementen, die den gleichen CSS -Stil teilen, nicht einfach den gleichen Klassennamen zu?" Du hast absolut recht. Es ist keine gute Idee, jedes Mal wiederverwendbare Komponenten zu erstellen, wenn einige Elemente in verschiedenen Komponenten den gleichen Stil teilen. In der Tat kann es unnötige Komplexität führen. Sie müssen sich also noch etwas fragen: Sind diese allgemein gestalteten Elemente Wrapper
?Betrachten Sie beispielsweise die folgenden Anmeldungs- und Anmeldeseiten:
<span>// Login.js </span><span>import './common.css'; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
<span>// SignUp.js </span><span>import './common.css'; </span> <span>function <span>Signup</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
Die gleichen Stile werden auf den Container (das
<span>// Login.js </span><span>import <span>Footer</span> from "./Footer.js"; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span> </span> <span>); </span><span>} </span>
Infolge
Um einen Ereignishörer an ein Element anzuhängen, können Sie ihn entweder in UseEffect () wie folgt verarbeiten:
<span>// App.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>function <span>App</span>() { </span> <span>const handleKeydown = () => { </span> <span>alert('key is pressed.'); </span> <span>} </span> <span>useEffect(() => { </span> <span>document.addEventListener('keydown', handleKeydown); </span> <span>return () => { </span> <span>document.removeEventListener('keydown', handleKeydown); </span> <span>} </span> <span>}, []); </span> <span>return (...); </span><span>} </span>
Oder Sie können es direkt in Ihrem JSX wie diesem machen, wie in der folgenden Tastekomponente gezeigt wird:
<span>// Button.js </span><span>function <span>Button</span>() { </span> <span>return ( </span> <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span> </span><span> Click me! </span><span> <span><span></button</span>></span> </span> <span>); </span><span>}; </span>
Wenn Sie einen Ereignishörer zum Dokument oder Fenster hinzufügen möchten, müssen Sie sich mit der ersten Methode entscheiden. Wie Sie vielleicht bereits erkannt haben, erfordert die erste Methode mehr Code mit Verwendung von Useffect (), AddEventListener () und REMEDEVENTLISTENER (). In diesem Fall ermöglicht das Erstellen eines benutzerdefinierten Hooks Ihre Komponenten prägnanter.
Es gibt vier mögliche Szenarien für die Verwendung von Ereignishörern:
Im ersten Szenario können Sie einen Haken erstellen, in dem sowohl der Ereignishörer als auch der Event -Handler definiert sind. Betrachten Sie den folgenden Haken:
<span>// useEventListener.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>export default function useKeydown() { </span> <span>const handleKeydown = () => { </span> <span>alert('key is pressed.'); </span> <span>} </span> <span>useEffect(() => { </span> <span>document.addEventListener('keydown', handleKeydown); </span> <span>return () => { </span> <span>document.removeEventListener('keydown', handleKeydown); </span> <span>} </span> <span>}, []); </span><span>}; </span>
Sie können diesen Haken in jeder Komponente wie folgt verwenden:
<span>// App.js </span><span>import useKeydown from './useKeydown.js'; </span> <span>function <span>App</span>() { </span> <span>useKeydown(); </span> <span>return (...); </span><span>}; </span>
Für die anderen drei Szenarien empfehle ich, einen Haken zu erstellen, der eine Veranstaltung und eine Veranstaltungsbearbeitungsfunktion als Requisiten erhält. Zum Beispiel werde ich Keydown und HandleKeydown als Requisiten an meinen benutzerdefinierten Haken übergeben. Betrachten Sie den folgenden Haken:
<span>// useEventListener.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>export default function useEventListener(<span>{ event, handler}</span> ) { </span> <span>useEffect(() => { </span> <span>document.addEventListener(event, props.handler); </span> <span>return () => { </span> <span>document.removeEventListener(event, props.handler); </span> <span>} </span> <span>}, []); </span><span>}; </span>
Sie können diesen Haken in jeder Komponente wie folgt verwenden:
<span>// Login.js </span><span>import './common.css'; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
Sie müssen nicht wirklich nach Anzeichen suchen, wenn es darum geht, GraphQL -Code wiederverwendbar zu machen. Für komplexe Anwendungen nehmen GraphQL -Skripte für eine Abfrage oder eine Mutation leicht 30–50 Codezeilen auf, da es viele Attribute zur Anfrage gibt. Wenn Sie das gleiche GraphQL -Skript mehr als ein- oder zweimal verwenden, ist es meiner Meinung nach einen eigenen benutzerdefinierten Haken.
Betrachten Sie das folgende Beispiel:
<span>// SignUp.js </span><span>import './common.css'; </span> <span>function <span>Signup</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
Anstatt diesen Code auf jeder Seite zu wiederholen, die Beiträge vom hinteren Ende anfordert, sollten Sie einen React -Hook für diese bestimmte API erstellen:
<span>// Login.js </span><span>import <span>Footer</span> from "./Footer.js"; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span> </span> <span>); </span><span>} </span>
Jetzt, da wir einige gemeinsame Anzeichen von gesehen haben, wenn eine neue Komponente erstellt, die Sie während Ihrer Reaktionsanwendung teilen können, setzen wir dieses Wissen in die Praxis um und erstellen drei praktische Demos.
React wird normalerweise zum Erstellen komplexer Web -Apps verwendet. Dies bedeutet, dass in React eine große Anzahl von Seiten entwickelt werden muss, und ich bezweifle, dass jede Seite einer App ein anderes Layout hat. Beispielsweise verwendet eine Web -App, die aus 30 Seiten besteht, normalerweise weniger als fünf verschiedene Layouts. Daher ist es unerlässlich, ein flexibles, wiederverwendbares Layout zu erstellen, das auf vielen verschiedenen Seiten verwendet werden kann. Dies spart Ihnen sehr viele Codezeilen und folglich eine enorme Zeit.
Betrachten Sie die folgende React -Funktionskomponente:
<span>// App.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>function <span>App</span>() { </span> <span>const handleKeydown = () => { </span> <span>alert('key is pressed.'); </span> <span>} </span> <span>useEffect(() => { </span> <span>document.addEventListener('keydown', handleKeydown); </span> <span>return () => { </span> <span>document.removeEventListener('keydown', handleKeydown); </span> <span>} </span> <span>}, []); </span> <span>return (...); </span><span>} </span>
Dies ist eine typische Webseite mit einer
Stattdessen können Sie eine Layoutkomponente erstellen, die
<span>// Button.js </span><span>function <span>Button</span>() { </span> <span>return ( </span> <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span> </span><span> Click me! </span><span> <span><span></button</span>></span> </span> <span>); </span><span>}; </span>
Diese Komponente erfordert nicht
Mit dieser Layoutkomponente können Sie Ihre Feed -Seite in einen viel ausgefeilteren Codeblock verwandeln:
<span>// useEventListener.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>export default function useKeydown() { </span> <span>const handleKeydown = () => { </span> <span>alert('key is pressed.'); </span> <span>} </span> <span>useEffect(() => { </span> <span>document.addEventListener('keydown', handleKeydown); </span> <span>return () => { </span> <span>document.removeEventListener('keydown', handleKeydown); </span> <span>} </span> <span>}, []); </span><span>}; </span>
Viele Entwickler neigen dazu, Position zu verwenden: Fix oder Position: absolut, wenn sie einen Header an die Oberseite des Ansichtsfensters oder eine Fußzeile nach unten kleben möchten. Bei Layouts sollten Sie jedoch versuchen, dies zu vermeiden.
Da die Elemente eines Layouts die übergegebenen Elemente von übergabtem Requisiten sind, möchten Sie den Stil Ihrer Layoutelemente so einfach wie möglich halten - so dass bestandene
Hier ist ein Beispiel:
<span>// Login.js </span><span>import './common.css'; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
Wenden wir nun einige Stile auf Ihre Feed -Seite an und sehen Sie, was Sie erstellt haben:
<span>// SignUp.js </span><span>import './common.css'; </span> <span>function <span>Signup</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
Und hier ist der Code in Aktion.
So sieht es auf Desktop -Bildschirmen aus.
So sieht es auf mobilen Bildschirmen aus.
Dieses Layout funktioniert auch wie auf iOS -Geräten beabsichtigt! Für den Fall, dass Sie es nicht wissen, ist iOS dafür bekannt, unerwartete positionbezogene Probleme in die Entwicklung von Web-Apps zu bringen.
Oft wird derselbe Event -Listener in einer Web -App mehr als einmal verwendet. In einem solchen Fall ist es eine großartige Idee, einen benutzerdefinierten React -Hook zu erstellen. Lassen Sie uns erfahren, wie dies zu tun ist, indem Sie einen UsesCrollSaver -Hook entwickeln, der die Bildlaufposition eines Benutzers auf einer Seite speichert, damit der Benutzer nicht alles von oben nach oben scrollen muss. Dieser Haken ist nützlich für eine Webseite, auf der eine große Anzahl von Elementen, wie z. B. Beiträge und Kommentare, aufgeführt sind. Stellen Sie sich die Feedseiten von Facebook, Instagram und Twitter ohne Scroll -Sparer vor.
Lassen Sie uns den folgenden Code aufschlüsseln:
<span>// Login.js </span><span>import <span>Footer</span> from "./Footer.js"; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span> </span> <span>); </span><span>} </span>
Sie können sehen, dass der UsesCrollSaver -Hook zwei Elemente empfangen muss: Scrollablediv, der ein scrollierbares Container sein muss, genau wie der
Zunächst müssen Sie einen "Scroll" -Ereigner -Listener an Ihren scrollbaren Container binden:
<span>// App.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>function <span>App</span>() { </span> <span>const handleKeydown = () => { </span> <span>alert('key is pressed.'); </span> <span>} </span> <span>useEffect(() => { </span> <span>document.addEventListener('keydown', handleKeydown); </span> <span>return () => { </span> <span>document.removeEventListener('keydown', handleKeydown); </span> <span>} </span> <span>}, []); </span> <span>return (...); </span><span>} </span>
Jetzt wird jedes Mal, wenn Scrollablediv von einem Benutzer scrolliert wird, eine Funktion namens GRELSCROLL ausgeführt. In dieser Funktion sollten Sie entweder LocalStorage oder SessionStorage verwenden, um die Bildlaufposition zu speichern. Der Unterschied besteht darin, dass Daten in LocalStorage nicht ablaufen, während Daten in SessionStorage beim Ende der Seitensitzung gelöscht werden. Sie können SetItem (ID: String, Wert: String) verwenden, um Daten in beiden Speichern zu speichern:
<span>// Login.js </span><span>import './common.css'; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
Wenn ein Benutzer zu einer Webseite zurückkommt, sollte der Benutzer an seine vorherige Bildlaufposition gerichtet werden - wenn es welche gibt. Diese Positionsdaten werden derzeit in SessionStorage gespeichert und Sie müssen sie herausnehmen und verwenden. Sie können GetItem (ID: String) verwenden, um Daten aus dem Speicher zu erhalten. Anschließend müssen Sie lediglich die Scroll-Top des scrollbaren Containers auf diesen erhaltenen Wert einstellen:
<span>// SignUp.js </span><span>import './common.css'; </span> <span>function <span>Signup</span>() { </span> <span>return ( </span> <span><span><span><div</span> className<span>='wrapper'</span>></span> </span><span> <span><span><main</span>></span> </span><span> {...} </span><span> <span><span></main</span>></span> </span><span> <span><span><footer</span> className<span>='footer'</span>></span> </span><span> {...} </span><span> <span><span></footer</span>></span> </span><span> <span><span></div</span>></span> </span> <span>); </span><span>} </span>
Jetzt, da Sie Ihren benutzerdefinierten Hook erstellt haben, können Sie den Haken auf jeder Webseite verwenden, die Sie möchten, solange Sie die beiden erforderlichen Elemente an den Haken übergeben: Scrollablediv und Pageurl. Gehen wir zurück zu layout.js und verwenden Sie Ihren Haken dort. Auf diese Weise können Sie jede Webseite, die dieses Layout verwendet, um Ihren Bildlaufsparer zu genießen:
<span>// Login.js </span><span>import <span>Footer</span> from "./Footer.js"; </span> <span>function <span>Login</span>() { </span> <span>return ( </span> <span><span><span><Wrapper</span> main<span>={{...}}</span> footer<span>={<span><span><Footer</span> /></span>}</span> /></span> </span> <span>); </span><span>} </span>
Und hier ist der Code in einer Sandkiste. Versuchen Sie, die Seite zu scrollen und dann mit dem Pfeil in der unten links und der Ecke die App neu zu laden.
Sie werden sich an der Stelle positioniert, an der Sie aufgehört haben!
Wenn Sie GraphQL mit React verwenden möchten, können Sie Ihre Codebasis noch weiter reduzieren, indem Sie einen React -Hook für GraphQL -Abfragen oder Mutationen erstellen.
Betrachten Sie das folgende Beispiel für das Ausführen einer GraphQL -Abfrage getPosts ():
<span>// App.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>function <span>App</span>() { </span> <span>const handleKeydown = () => { </span> <span>alert('key is pressed.'); </span> <span>} </span> <span>useEffect(() => { </span> <span>document.addEventListener('keydown', handleKeydown); </span> <span>return () => { </span> <span>document.removeEventListener('keydown', handleKeydown); </span> <span>} </span> <span>}, []); </span> <span>return (...); </span><span>} </span>
Wenn es immer mehr Attribute gibt, die sie vom Back -End anfordern müssen, nimmt Ihr GraphQL -Skript immer mehr Platz ein. Anstatt das GraphQL -Skript zu wiederholen und bei jedem Mal, wenn Sie Abfragen getPosts () ausführen müssen, können Sie den folgenden React -Hook erstellen:
<span>// Button.js </span><span>function <span>Button</span>() { </span> <span>return ( </span> <span><span><span><button</span> type<span>="button"</span> onClick<span>={() => { alert('Hi!')}}</span>></span> </span><span> Click me! </span><span> <span><span></button</span>></span> </span> <span>); </span><span>}; </span>
Dann können Sie Ihren UseGetGetPosts () -Haken wie folgt verwenden:
<span>// useEventListener.js </span><span>import <span>{ useEffect }</span> from 'react'; </span> <span>export default function useKeydown() { </span> <span>const handleKeydown = () => { </span> <span>alert('key is pressed.'); </span> <span>} </span> <span>useEffect(() => { </span> <span>document.addEventListener('keydown', handleKeydown); </span> <span>return () => { </span> <span>document.removeEventListener('keydown', handleKeydown); </span> <span>} </span> <span>}, []); </span><span>}; </span>
In diesem Artikel haben Sie die drei häufigsten Indikatoren für eine wiederverwendbare React -Komponente und die drei beliebtesten Verwendungsfälle gelernt. Jetzt haben Sie das Wissen über , wenn eine wiederverwendbare React -Komponente und wie
so einfach und professionell erstellen. Bald genießen Sie es, Code -Zeilen in eine ausgefeilte wiederverwendbare React -Komponente oder -Hake umzusetzen. Mit diesen Refactoring -Techniken konnte unser Entwicklungsteam bei Clay unsere Codebasis auf eine überschaubare Größe reduzieren. Ich hoffe du kannst es auch!
wiederverwendbare Komponenten in React.js sind grundlegende Bausteine, die die Funktionalität der Benutzeroberfläche (Benutzeroberflächen) zusammenschließen und die Anwendungen modular und effizient ermöglichen. Diese Komponenten sind so konzipiert, dass sie in Ihrer Anwendung oder sogar in verschiedenen Projekten verwendet werden können, was eine Ebene der Code -Wiederverwendbarkeit bietet, die die Entwicklung erheblich vereinfacht. Sie fördern eine klare Trennung von Bedenken, indem sie ihre Logik und das Rendern zusammenfassen und sicherstellen, dass ihre internen Implementierungsdetails vor dem Rest der Anwendung verborgen bleiben. Dies verbessert nicht nur die Codeorganisation und die Wartbarkeit, sondern ermöglicht es den Entwicklern auch, gemeinsam zusammen zu arbeiten, indem sie Komponenten über Teams und Projekte hinweg teilen und wiederverwenden. Durch die Verwendung der gleichen Komponenten in verschiedenen Teilen der Anwendung können Sie ein einheitliches Erscheinungsbild gewährleisten, Richtlinien entwerfen und eine poliertere Benutzererfahrung erstellen. Diese Komponenten werden durch Requisiten parametrisiert und ermöglichen die Anpassung und Anpassung an verschiedene Anwendungsfälle. Diese Parametrisierungsfunktion bietet ein Gleichgewicht zwischen Konsistenz und Flexibilität und bietet Entwicklern die Möglichkeit, das Verhalten und das Erscheinungsbild des Komponenten entsprechend den spezifischen Anforderungen jeder Anwendungsfunktion oder-Seite zu übertreffen. Verfahren. Isolierte und eingekapselte Komponenten sind leichter zu testen und Sie können Unit -Tests erstellen, um deren Richtigkeit und Funktionalität zu überprüfen. Durch die Einbeziehung wiederverwendbarer Komponenten in Ihre React -Anwendungen können Sie eine wartbare, modulare und konsistente Codebasis festlegen, wodurch die Entwicklungseffizienz letztendlich fördert und die Gesamtqualität Ihrer Benutzeroberflächen verbessert wird.
Ein häufiges Beispiel für eine wiederverwendbare Komponente in React ist eine „Taste“ -Komponente. Die Schaltflächen sind ein grundlegender Bestandteil von Benutzeroberflächen und werden in allen Anwendungen für verschiedene Interaktionen verwendet. Erstellen einer wiederverwendbaren Tastenkomponente in React können Sie ein konsistentes Erscheinungsbild und ein konsistentes Verhalten beibehalten und gleichzeitig die Code -Duplikation reduzieren. Hier ist ein einfaches Beispiel für eine wiederverwendbare Tastekomponente:
Importieren Sie React von 'React';
const button 🎜>
);
};
Die Standardtaste für die Standardeinstellung; Der Klick -Event -Handler und ein optionaler „Stil“ -Pect, um das Erscheinungsbild der Schaltfläche anzupassen. Diese Komponente verkauft die HTML -Struktur und -verhalten der Taste, wodurch sie in der gesamten Anwendung leicht wiederverwendbar ist, ohne dass der Code dupliziert. In der übergeordneten Komponente (in diesem Fall „App“) können Sie einen bestimmten Beschriftungstext übergeben, Funktionen zur Ereignishandhabung und Stileinstellungen klicken, um verschiedene Schaltflächen mit unterschiedlichen Zwecken und Erscheinungen zu erstellen. Durch die Verwendung solcher wiederverwendbaren Komponenten führen Sie einen einheitlichen Benutzeroberflächenstil und verbessern die Wartbarkeit der Code. Diese Komponenten können über die Schaltflächen hinaus erweitert werden, um komplexere UI -Elemente wie Eingabefelder, Karten oder Navigationsstangen zu erfassen, was zu einer modularen und wartbaren Reaktionsanwendung führt. Wiederverwendbare Komponenten beschleunigen nicht nur die Entwicklung, sondern führen auch zu einer konsistenten, benutzerfreundlicheren Schnittstelle, die sich an die Gestaltung von Richtlinien und Best Practices hält.
Erstellen wiederverwendbarer Komponenten in React.js ist eine grundlegende Praxis für den Aufbau modularer und wartbarer Anwendungen. Der Prozess beginnt mit einem klaren Plan, in dem Sie das Element der spezifischen Funktionalität oder Benutzeroberfläche (UI) identifizieren, das Sie innerhalb der Komponente einkapseln möchten. Sobald Sie den Zweck der Komponente definiert haben, erstellen Sie in Ihrem React -Projekt eine neue JavaScript/JSX -Datei. Es ist eine gute Praxis, die Datei zu benennen, beginnend mit einem Großbuchstaben, der die Namensberechtigungskonventionen von React hält. Komponenten können je nach Ihren Anforderungen funktional oder klassenbasiert sein. Wenn Sie Ihre Komponente parameterisieren, akzeptieren Sie Requisiten als Eingänge, mit denen Sie sein Erscheinungsbild und Verhalten anpassen können. Das Definieren von Proptypen mithilfe von ProTTypes oder TypeScript sorgt für die Sicherheit und Klarheit von Typ und erleichtert das Verständnis der Verwendung der Komponente. Sobald Ihre Komponente erstellt wurde, ist sie für die Verwendung in anderen Teilen Ihrer Anwendung bereit. Sie können es importieren und einbeziehen, um bestimmte Requisiten zu übergeben, um sein Verhalten für jeden Anwendungsfall zu konfigurieren. Wiederverwendbare Komponenten können leicht in verschiedene Teile Ihrer Anwendung integriert werden, die die Entwicklungseffizienz verbessern und zu einer benutzerfreundlichen und visuell konsistenten Benutzeroberfläche beitragen.
wiederverwendbare Komponenten in React bieten zahlreiche Vorteile, die den Entwicklungsprozess und die Qualität der Anwendungen erheblich verbessern. Sie fördern die Modularität, indem sie komplexe Benutzeroberflächen in kleinere, in sich geschlossene Bausteine zerlegen, wodurch Codebasen organisierter und wartbarer werden. Diese Komponenten konzentrieren sich auf spezifische Funktionen oder UI -Elemente, sodass Entwickler sie unabhängig verwalten und aktualisieren können, was das Risiko unbeabsichtigter Nebenwirkungen verringert und den Entwicklungsprozess optimiert. Bemühung. Sie können dieselbe Komponente in verschiedenen Teilen Ihrer Anwendung oder in verschiedenen Projekten verwenden, wodurch die Notwendigkeit des Umschreibens ähnlicher Code beseitigt wird. Dies beschleunigt nicht nur die Entwicklung, sondern gewährleistet auch eine konsistente Benutzeroberfläche. Konsistenz ist ein weiterer kritischer Vorteil. Durch die Verwendung der gleichen Komponente für bestimmte UI -Elemente behalten Sie ein einheitliches Erscheinungsbild und ein einheitliches Verhalten bei, halten Sie sich an die Entwurfsrichtlinien und die Verbesserung der Benutzererfahrung. Sie akzeptieren Requisiten, die es den Entwicklern ermöglichen, ihr Verhalten und ihr Aussehen für unterschiedliche Anwendungsfälle zu stimmen. Diese Parametrisierung verbessert die Flexibilität und Vielseitigkeit Ihrer Komponenten. Wenn Probleme auftreten, sind diese isolierten Komponenten einfacher zu testen und zu debuggen, was eine effiziente Problemlösung ermöglicht. Darüber hinaus können Teams durch das Teilen und Wiederverwenden von Komponenten über Projekte hinweg effektiver zusammenarbeiten, einen einheitlichen UI-Stil aufrechterhalten und die Codekonsistenz sicherstellen, was für groß angelegte und langfristige Entwicklungsbemühungen von wesentlicher Bedeutung ist. Zusammenfassend lässt sich sagen, dass wiederverwendbare Komponenten in React die Entwicklung der Entwicklung fördern, die Wiederverwendbarkeit von Code fördern, die UI-Konsistenz beibehalten und Anpassbarkeit bieten, was letztendlich zu effizienteren, qualitativ hochwertigen Anwendungen führt.
Eine gut gestaltete wiederverwendbare Komponente in React weist mehrere entscheidende Eigenschaften auf. In erster Linie ist Wiederverwendbarkeit das Kernattribut. Diese Komponenten sollten erstellt werden, um in verschiedenen Teilen Ihrer Anwendung oder sogar in separaten Projekten verwendet zu werden. Um dies zu erreichen, müssen sie stark parametrisiert sein, sodass Entwickler ihr Aussehen und ihr Verhalten durch Requisiten anpassen können. Diese Vielseitigkeit ist ein grundlegender Aspekt dessen, was eine Komponente wirklich wiederverwendbar macht.
Einkapselung ist gleichermaßen wichtig. Wiederverwendbare Komponenten sollten ihre interne Logik und das Rendern zusammenfassen und die Implementierungsdetails vor dem Rest der Anwendung abschirmen. Diese Trennung von Bedenken führt zu sauberer, modularerer Code und vereinfacht die Integration.
Modularität ist ein weiteres Schlüsselattribut. Gute wiederverwendbare Komponenten sollten einen einzigartigen Zweck haben und sich auf ein bestimmtes Stück Funktionalität oder ein bestimmtes UI -Element konzentrieren. Dieses modulare Design verbessert Code -Wartbarkeit und Debugging -Effizienz. Darüber hinaus ist eine einfache Prüfung von entscheidender Bedeutung. Isolierte Komponenten sind einfacher zu testen und fördern die Erstellung von robustem und zuverlässigem Code. Diese Klarheit hilft anderen Entwicklern, zu verstehen, wie sie die Komponente effektiv verwenden können. Durch den Beitrag zu einer konsistenten Benutzeroberfläche, wenn dieselbe Komponente für bestimmte UI-Elemente verwendet wird, gewährleisten sie eine zusammenhängende und benutzerfreundliche Anwendung. Im Wesentlichen ist eine gute wiederverwendbare Komponente rekonfigurierbar, eingekapselt, modular, leicht testbar und trägt zur Wartbarkeit von Code und der UI -Konsistenz bei.
Das obige ist der detaillierte Inhalt vonEin praktischer Leitfaden zum Erstellen wiederverwendbarer React -Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!