2016-09-08 9 views
1

Welche Nachteile hat die Verwendung einer großen React-Komponente?Was sind die Nachteile einer großen React-Komponente?

Ich habe eine lange Erfahrung mit Webpack, browserify, AngularJS, ES6, NPM und anderen ähnlichen Web-Framework. Ich bin neu in Reaktion.

Ich möchte eine einzelne Seite App in React erstellen. Ich will oder brauche keine Tests. Ich brauche keine Team-Freunde, um daran zu arbeiten. Ich muss die Produktentwicklung nur so schnell wie möglich machen. Mach das Ding funktioniert. Sie können es MVP nennen. Sie können es type lessm oder smart development nennen. Wenn es in Zukunft gut läuft, kann ich das Projekt umgestalten. Ich bin der einzige Entwickler, der daran arbeitet. Ich mache mir keine Sorgen über Performance-Problem (wenn es nur wenige ms ist)

Die Frage ist: Alle Artikel sollen so viel wie möglich viele und kleine React-Komponenten machen. In separaten Dateien. Sie können das React-Starter-Kit sehen. Es ist riesig.

Sie können sehen, dass jede Komponente eine separate Datei ist.Es gibt große webpack.config.js Datei. Jede Komponente importiert viele andere Dinge. Wenn ich auch Redux möchte, muss ich den Laden importieren und connect auf jeder Komponente machen. Ich möchte einen anderen Ansatz nehmen. Ich möchte React & Redux verwenden. Aber nur mit einer Komponente. Jedes innere Element kann Ereignisse absetzen oder ausführen.

Gibt es irgendwelche Probleme in der Zukunft, an die ich nicht denke?


HTML:

<html><head><body></body></html> 

JavaScript:

App=React.createClass(function(){ 
    getInitialState:function(){ 
     return { 
      openMore:'block' 
     } 
    }, 
    openMore:function(){ 
     this.setState({openMore:'visible'}) 
    }, 
    render:function(){ 
     return (
      <div> 
       I want to put all the HTML of the app 
       <span> 
        In one component that do everything. 
        <button onClick={this.openMore}>More Info</button> 
        <span> This way I beleive I will need to type less for development</span> 
        <b style={{display:this.getState().openMore}}>What are the disadvance of this?</b> 
       </span> 
      </div> 
     ) 
    } 
}) 
ReactDOM.render(App,document.getElementsByTagName('body')[0]) 
+0

meinst du neben eine monolythic große datei hard ton navigieren? – sylvain

+0

Ist es nicht der Sinn von React, kleine Komponenten zu bauen, um etwas Größeres zu bauen? Sie alle in der Datei zu haben ist ziemlich kontraproduktiv. – Li357

Antwort

6

Eine einzelne große Datei ist in Ordnung. React basiert auf den Maximen "Keine Abstraktion ist besser als die falsche Abstraktion" und hat eine API mit geringer Oberfläche.

Wenn Sie nicht sicher sind, welche Probleme Ihre Anwendung löst, warten Sie, bis Sie den Schmerz spüren, keine Abstraktionen zu haben, bevor Sie eine erstellen.

Wenn Ihre Anwendung wahrscheinlich im Fluss ist, da ihr Funktionsumfang nicht genagelt ist, dann sollten Sie sich nicht damit beschäftigen, Dinge in verschiedenen Dateien zu verschieben.

Wenn Sie keine Website mit wiederverwendbaren Komponenten haben, die intuitiv trennbar sind, trennen Sie sie nicht in andere Komponenten.

Es ist in Ordnung, React nur als Mittel zu verwenden, eine deklarative Syntax dafür zu haben, wie Ihr HTML in verschiedenen Zuständen aussehen sollte.

+0

Danke. Ich mag die Idee "Keine Abstraktion ist besser als die falsche Abstraktion" – Aminadav

1

große Komponenten mit schlecht ist darauf zurückzuführen, dass Sie nicht Ihren Code vereinfachen kann. Wenn Sie Ihre Module in kleinere Teile aufteilen, wird es Ihnen leichter fallen, den Code längerfristig zu verwalten und einen Fehler schneller zu finden. Stack Trace ist einfacher und kompositorischer, wenn eine implizite Komponente vorhanden ist.

FWIW, Sie können viel mehr trennen Ihre Komponente in kleinere, wie gefilterte Requisiten und einen eigenen Zustand. Die schlechte Sache ist jedoch, dass Sie den Überblick darüber verlieren können, wie die Anwendung aufgebaut ist, wenn Sie sich den Build ansehen, den andere erstellt haben.

6

Nun Nachteile sind viele. Ich werde versuchen, sie von der Liste, was ich konfrontiert und beobachtet: -

  1. wurde auf dem Konzept aufgebaut Reagieren Seite in Komponenten zu brechen, also ja, je mehr Sie die Seite in kleine Komponenten brechen desto mehr ist es einfacher zu bedienen .
  2. Es ist in der Regel einfach, den Code zu verfolgen.
  3. Seine skalierbare
  4. Eine Komponente bricht nicht andere Komponenten.
  5. Re-rendering gibt es nur für bestimmte Komponenten, wenn sie isoliert sind. Wenn Sie alles in einer einzigen Komponente haben, würde das Rendering dazu führen, dass Ihre gesamte Komponente wieder geladen wird, was die Effizienz verringert.
  6. Härter zu testen
  7. Schwierig mit Redux beim Passieren von Aktionen zu verwenden und dann zu speichern.
  8. Ihre Komponente sollte nur einen Job ausführen.
  9. Die Komponenten können nicht in Präsentations- und Containerkomponenten zerlegt werden, wodurch Redux nicht zum vollen Potential genutzt wird.
  10. Die Code-Überlauffunktion des Webpacks, die die Seitengeschwindigkeit aufgrund des teilweisen Ladens von Codes erhöht, kann nicht verwendet werden.

Dies sind einige Dinge, die ich persönlich konfrontiert. Als nächstes kommt zur Konfiguration des Webpacks. Ich habe Webpack Datei kaum mehr als 100 Zeilen konfiguriert und vertraue mir diese 100 Zeilen machen dein Leben wirklich einfacher. In der Tat ist die Grundkonfiguration nur 10-15 Zeilen, die Ihr Bündel generieren können.

Nun, um Probleme in der Zukunft kommen, ja folgende würde Probleme: -

  1. Schwierig bis zu skalieren.
  2. Schwierige
  3. Nicht verwendet Bibliotheken, um ihr Potenzial
  4. Schwierig zu testen Komponente aufgrund Monolithen Verhalten zu verwalten.

Hoffe es hilft !!!

+0

Sind Sie sicher Punkt 5 in der ersten Liste? * '> Re-rendering gibt es nur für bestimmte Komponenten, wenn sie isoliert sind. Wenn Sie alles in einer einzelnen Komponente haben, würde das Rendering Ihre gesamte Komponente wieder laden. * Wie ich weiß, rendert React nur den HTML-Code, der mit Virtual DOM geändert wurde, nicht die gesamte Komponente. – Aminadav

+0

Das hängt davon ab, wie Sie Ihre Routen organisieren. Wenn Sie eine einzelne Komponente haben, die wirklich alle Komponenten enthält, und Sie versuchen, einen Status festzulegen, werden auch die untergeordneten Elemente angezeigt. –

+0

Wenn Sie mit Rendern meinen, meinen Sie, die Render-Funktion auszuführen oder alle DOM-Baumstrukturen zu entfernen und den DOM-Baum erneut zu erstellen? – Aminadav

Verwandte Themen