Ein praktischer Leitfaden zum Erstellen wiederverwendbarer React -Komponenten-js-Tutorial-php.cn

Ein praktischer Leitfaden zum Erstellen wiederverwendbarer React -Komponenten

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.

Key Takeaways

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.
Verbesserung der Code -Effizienz und Projektskalierbarkeit: Das Tutorial betont die Vorteile des Refactoring für Wiederverwendbarkeit, wie z. Durch die Übernahme der beschriebenen Praktiken können Entwickler effizientere, sauberere und modulare React -Anwendungen erstellen, was letztendlich zu schnelleren Entwicklungszyklen und robusteren Softwarelösungen führt.

Top drei Indikatoren einer wiederverwendbaren React -Komponente

Schauen wir uns zunächst einige Hinweise auf

an, wenn Sie dies vielleicht tun möchten.

Wiederholte Erstellung von Wrappern mit dem gleichen CSS -Stil

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>

Nach dem Login kopieren

<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>

Nach dem Login kopieren

Die gleichen Stile werden auf den Container (das

-Element) und die Fußzeile jeder Komponente angewendet. In diesem Fall können Sie also zwei wiederverwendbare Komponenten erstellen - und - und ihnen Kinder als Requisite übergeben. Zum Beispiel könnte die Anmeldungskomponente wie folgt überarbeitet werden:

<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>

Nach dem Login kopieren

Infolge

sich wiederholte Verwendung von Ereignishörern

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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:

gleiche Ereignishörer, gleicher Ereignishandler
gleiches Ereignishörer, verschiedene Ereignis -Handler
Verschiedener Ereignishörer, gleicher Ereignishandler
Verschiedener Ereignishörer, unterschiedlicher Ereignis -Handler

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

wiederholte Verwendung des gleichen GraphQL -Skripts

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

drei wiederverwendbare React -Komponenten ausbauen

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.

1. Layoutkomponente

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>

Nach dem Login kopieren

Dies ist eine typische Webseite mit einer

, einem

und einer . Wenn es 30 weitere Webseiten wie diese gibt, würden Sie es leicht müde werden, wiederholt HTML -Tags zu schreiben und denselben Stil immer wieder anzuwenden.

Stattdessen können Sie eine Layoutkomponente erstellen, die

, und als Requisiten empfängt, wie im folgenden Code:

<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>

Nach dem Login kopieren

Diese Komponente erfordert nicht

und

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>

Nach dem Login kopieren

Pro -Tipp zum Erstellen von Layouts mit klebrigen Elementen

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

, oder gestylt werden wie beabsichtigt. Ich empfehle also, Position anzuwenden: Behoben und Anzeigen: Biegung auf das äußerste Element Ihres Layouts und Einstellen von Überlauf-y: Scrollen Sie zum Element.

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Sticky Header und Fußzeile Demo

Und hier ist der Code in Aktion.

So sieht es auf Desktop -Bildschirmen aus.

Ein praktischer Leitfaden zum Erstellen wiederverwendbarer React -Komponenten

So sieht es auf mobilen Bildschirmen aus.

Ein praktischer Leitfaden zum Erstellen wiederverwendbarer React -Komponenten

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.

2. Event -Hörer

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>

Nach dem Login kopieren

Sie können sehen, dass der UsesCrollSaver -Hook zwei Elemente empfangen muss: Scrollablediv, der ein scrollierbares Container sein muss, genau wie der

-Container in Ihrem Layout oben, und Pageurl, der als Kennung einer Seite so verwendet wird dass Sie Scrollpositionen auf mehreren Seiten speichern können.

Schritt 1: Speichern Sie die Bildlaufposition

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Schritt 2: Stellen Sie die Bildlaufposition

wieder her.

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>

Nach dem Login kopieren

Schritt 3: Verwenden Sie den UsesCrollSaver -Hook auf jeder Webseite

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>

Nach dem Login kopieren

scrollSaver Demo

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!

3. Abfrage/Mutation (spezifisch für GraphQL)

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Schlussfolgerung

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!

FAQs über das Erstellen wiederverwendbarer React -Komponenten

Was sind wiederverwendbare Komponenten in React.js?

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.

Was ist ein Beispiel für eine wiederverwendbare Komponente in React?

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.

So erstellen Sie wiederverwendbare Komponenten in React?

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.

Was sind die Vorteile wiederverwendbarer Komponenten in React?

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.

Was macht eine gute wiederverwendbare Komponente in React?

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!