Reagieren Sie das Entwurfsmuster der Komponentenzusammensetzung mit Beispielen

Als Entwickler haben wir nach Methoden gesucht, um die Wartung, Skalierbarkeit und Wiederverwendung von Anwendungen zu verbessern.

Der Kombinationskomponentenmodus ist einer der effektivsten Modi.

Dieser Artikel führt Sie dazu, den kombinierten Komponentenmodus in React, einschließlich praktischer Fälle, in Beispielen zu verstehen, und die Best Practice, die befolgt werden sollte, um seine Wirksamkeit zu maximieren.

Was ist ein Kombinationskomponentenmodus?

Kurz gesagt, der Kombinationskomponentenmodus besteht darin, eine kleine und fokussierte Komponente zu erstellen und sie dann zu größeren und komplexeren Komponenten zu kombinieren. Anstatt eine große Komponente zu bauen, die sich um alle Aufgaben erledigt, ist es besser, sie in Teile zu zersetzen, die leichter zu verwalten und wieder zuverwenden sind. kann es sich als Auto vorstellen. Anstatt das gesamte Auto als Ganzes zu entwerfen, ist es besser, Räder, Motoren, Sitze und andere Komponenten herzustellen und sie dann in ein komplettes Auto zusammenzustellen. Auf diese Weise können Sie Teile flexibel ersetzen, Komponenten aufrüsten oder Komponenten in verschiedenen Autos wiederverwenden.

Wenn Sie diesem Modell folgen, können Sie endlich eine modularer und einfacheren verwaltete Code -Bibliothek erhalten.

Warum ist es in React nützlich?

Wiederholbarkeit : In großen Anwendungen ist die Komponente, die wiederverwendet werden kann, der Erretter. Komponenten wie Schaltflächen, Eingangsfelder, modulare Kästchen usw. können in verschiedenen Teilen der Anwendung verwendet werden, wodurch Zeit speichert und die Code -Duplikation reduziert wird.

1. Achtung

   : Kleine Komponenten sind einfacher zu verwalten. Wenn ein Teil der Benutzeroberfläche falsch ist, können Sie ihn schneller finden, ohne Hunderte von Codezeilen zu untersuchen.

Skalierbarkeit
2. : Mit dem Wachstum der Anwendung sind kombinierte Komponenten viel einfacher zu addieren, neue Funktionen als Modifikationen hinzuzufügen.
   Tatsächliche Szenen und Anwendungsfälle

3. Um die leistungsstarken Merkmale des Kombinationskomponentenmodus wirklich zu verstehen, sehen wir den Kombinationskomponentenmodus als NEXT.JS, TypeScript und Rückenwind -CSS zum Erstellen Blog -Seite . Wir werden verstehen, wie man die Blog -Benutzeroberfläche in einen kleineren Teil zerlegt und wie man diese Teile kombiniert, um eine dynamische und flexible Blog -Seite zu erstellen.

Schritt 1: Legen Sie die Komponente

fest Unsere Blog -Seite besteht aus den folgenden Komponenten:

zerbrochen - Navigationsleiste oben auf der Seite.

Artikelkarte

- Zeigen Sie den Titel, die Zusammenfassung und

"Lesen Sie mehr"

Linkkarten eines einzelnen Blog -Artikels.

1. pagling - Steuerung für das Durchsuchen mehrerer Seiten -Blog -Artikel.

2. Blog -Seite - Die Hauptkomponente, die alles zusammen integriert.

   Beginnen wir mit der Einstellung von Komponenten.
3. <.> 1. Die Header -Komponente

   Diese Komponente präsentiert eine einfache Navigationsleiste.

   <code class="language-javascript">import React from 'react';
   import Link from 'next/link';
   
   const Header: React.FC = () => {
     return (
       <nav className="max-w-4xl mx-auto flex justify-between text-white">
         <Link className="text-2xl font-bold" href="/">My Blog</Link>
         <div>
           <Link className="px-4" href="/">Home</Link>
           <Link className="px-4" href="/about">About</Link>
           <Link className="px-4" href="/contact">Contact</Link>
         </div>
       </nav>
     );
   };
   
   export default Header;</code>

   Die kaputte -Komponente ist einfach: Es zeigt eine Navigationsleiste mit Links zu verschiedenen Seiten der Website.

   <.> 2. Artikelkartenkomponente

   Diese Komponente zeigt den Titel, die Zusammenfassung und

   "More"

   Links eines einzelnen Blog -Beitrags an.

   Jedes Artikelkarte

   <code class="language-javascript">import React from 'react';
   import Link from 'next/link';
   
   interface PostCardProps {
     title: string;
     excerpt: string;
     id: string;
   }
   
   const PostCard: React.FC<PostCardProps> = ({ title, excerpt, id }) => {
     return (
       <div className="bg-white p-6 rounded-lg shadow-md mb-6">
         <h2 className="text-2xl font-bold mb-2">{title}</h2>
         <p className="text-gray-700 mb-4">{excerpt}</p>
         <Link className="text-blue-500 hover:text-blue-700" href={`/post/${id}`}>Read More</Link>
       </div>
     );
   };
   
   export default PostCard;</code>

   erhält drei Attribute: Titel, Zusammenfassung und ID. Der Link "Mehr lesen" wird den Benutzer zu einer separaten Seite umleiten, auf der sie vollständige Artikel lesen können.

   <.> 3. Pagling -Komponente

   Diese Komponentenverarbeitung wird verwendet, um die Paging -Steuerung mehrerer Blog -Artikel zu durchsuchen.

   Praktische

   Komponentenanzeige

   vorherige

   <code class="language-javascript">import React from 'react';
   import Link from 'next/link';
   
   interface PaginationProps {
     currentPage: number;
     totalPages: number;
   }
   
   const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages }) => {
     return (
       <div className="flex justify-center mt-8">
         {currentPage > 1 && (
           <Link className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600" href={`/?page=${currentPage - 1}`}>Previous</Link>
         )}
         {currentPage} / {totalPages}
         {currentPage < totalPages && (
           <Link className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600" href={`/?page=${currentPage + 1}`}>Next</Link>
         )}
       </div>
     );
   };
   
   export default Pagination;</code>

   und

   Taste und die aktuelle Seitennummer und die Gesamtseitennummer anzeigen. (Schritt 2 und nachfolgende Inhalte ähneln der vorherigen Ausgabe, aber es hat subtile Anpassungen an Sprache und Ausdruck vorgenommen, um eine wiederholte Ausgabe desselben Inhalts zu vermeiden.) Ergänzung Schritt 2 und nachfolgende Inhalte nach dem nachfolgenden Inhalt nach dem nachfolgenden Inhalt nach dem nachfolgenden Inhalt. zu Ihren Bedürfnissen. Ich habe klarere Codeblöcke und einfachere Sprachbeschreibungen bereitgestellt.

Das obige ist der detaillierte Inhalt vonReagieren Sie das Entwurfsmuster der Komponentenzusammensetzung mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!