ReactJs-Grundlagen-Tutorial - Essential Edition

1. Einführung in ReactJS

React entstand aus einem internen Projekt von Facebook. Da das Unternehmen mit den vielen JavaScript-MVC-Frameworks auf dem Markt unzufrieden war, beschloss es, ein eigenes Framework zu schreiben, um die Instagram-Website zu erstellen. Nachdem das System entwickelt worden war, fanden wir es sehr nützlich und haben es daher im Mai 2013 der Öffentlichkeit zugänglich gemacht. Da das Designkonzept von React äußerst einzigartig ist, handelt es sich um eine revolutionäre Innovation mit herausragender Leistung und sehr einfacher Code-Logik. Aus diesem Grund schenken ihm immer mehr Menschen Beachtung und verwenden es, da sie davon überzeugt sind, dass es in Zukunft das Haupttool für die Webentwicklung sein könnte.

Offizielle Website-Adresse von ReactJS: http://facebook.github.io/react/

Github-Adresse: https://github.com/facebook/react

2. Verständnis von ReactJS und die Vorteile von ReactJS

Zunächst einmal gibt es einige Missverständnisse über React, die ich hier zusammenfassen werde:

• React ist kein vollständiges MVC-Framework. Es kann höchstens als V (View) in MVC betrachtet werden. Selbst React erkennt das MVC-Entwicklungsmodell nicht vollständig.
• Die serverseitige Rendering-Funktion von React ist nur ein nettes Extra, nicht ihr eigentlicher Zweck. Tatsächlich wird die serverseitige Anwendung auf der offiziellen Website von React kaum erwähnt.
• Manche Leute vergleichen React und Web Component, aber die beiden sind nicht völlig konkurrenzfähig. Sie können React verwenden, um ein echtes Web Component zu entwickeln.
• React ist keine neue Vorlagensprache, JSX ist nur eine Darstellung und React kann ohne JSX funktionieren.

1. Hintergrund und Prinzipien von ReactJS

Bei der Webentwicklung müssen wir die sich ändernden Daten immer in Echtzeit in der Benutzeroberfläche widerspiegeln, daher müssen wir am DOM arbeiten. Komplexe oder häufige DOM-Operationen sind normalerweise die Ursache für Leistungsengpässe (die Durchführung komplexer DOM-Operationen mit hoher Leistung ist normalerweise ein wichtiger Indikator für die Fähigkeiten eines Front-End-Entwicklers). Zu diesem Zweck führte React den Virtual DOM-Mechanismus ein: Dabei wurde eine Reihe von DOM-APIs mithilfe von Javascript auf der Browserseite implementiert. Bei der Entwicklung auf Basis von React wird die gesamte DOM-Konstruktion über virtuelles DOM durchgeführt. Immer wenn sich die Daten ändern, erstellt React den gesamten DOM-Baum neu. Anschließend vergleicht React den aktuellen gesamten DOM-Baum mit dem vorherigen DOM-Baum, um die Unterschiede in der DOM-Struktur zu ermitteln, und führt dann nur für die Teile, die geändert werden müssen, tatsächliche Browser-DOM-Updates durch. React kann den virtuellen DOM auch stapelweise aktualisieren. Zwei Datenänderungen innerhalb einer Ereignisschleife werden zusammengeführt. Wenn Sie beispielsweise den Knoteninhalt kontinuierlich von A nach B und dann von B nach A ändern, geht React davon aus, dass sich die Benutzeroberfläche nicht geändert hat. Bei manueller Steuerung ist diese Logik normalerweise äußerst kompliziert. Obwohl jedes Mal ein vollständiger virtueller DOM-Baum erstellt werden muss, ist die Leistung extrem hoch, da es sich beim virtuellen DOM um Speicherdaten handelt und nur der Diff-Teil am tatsächlichen DOM ausgeführt wird, wodurch das Ziel der Leistungsverbesserung erreicht wird. Auf diese Weise müssen sich Entwickler bei gleichzeitiger Gewährleistung der Leistung nicht mehr darum kümmern, wie Änderungen an bestimmten Daten in ein oder mehrere bestimmte DOM-Elemente aktualisiert werden, sondern müssen sich nur darum kümmern, wie die gesamte Schnittstelle in jedem beliebigen Datenzustand gerendert wird.

Wenn Sie wie in den 1990er Jahren rein serverseitig gerenderte Webseiten geschrieben haben, sollten Sie wissen, dass der Server lediglich HTML basierend auf den Daten rendern und an den Browser senden muss. Muss aufgrund eines Klicks eines Benutzers ein Statustext geändert werden, erfolgt dies ebenfalls durch ein Aktualisieren der gesamten Seite. Der Server muss nicht wissen, welcher kleine HTML-Abschnitt sich geändert hat, sondern muss lediglich die gesamte Seite basierend auf den Daten aktualisieren. Mit anderen Worten: Alle Änderungen an der Benutzeroberfläche werden durch eine allgemeine Aktualisierung vorgenommen. React bringt dieses Entwicklungsmodell auf leistungsstarke Weise in das Frontend. Jedes Mal, wenn Sie die Benutzeroberfläche aktualisieren, können Sie sich das so vorstellen, als würden Sie die gesamte Seite aktualisieren. Die Durchführung lokaler Updates zur Sicherstellung der Leistung obliegt dem React-Framework.

Am Beispiel der Chat-Anwendung in Facebooks Video zur Einführung von React sieht die traditionelle Entwicklungsidee wie oben gezeigt aus, wenn eine neue Nachricht eingeht. Während des Entwicklungsprozesses müssen Sie wissen, welche Daten eingegangen sind und wie Sie den neuen DOM-Knoten zum aktuellen DOM-Baum hinzufügen. Die auf React basierende Entwicklungsidee sieht wie unten gezeigt aus. Sie müssen sich nur um die Daten als Ganzes kümmern, und wie sich die Benutzeroberfläche zwischen den beiden Daten ändert, bleibt vollständig dem Framework überlassen. Wie Sie sehen, wird durch die Verwendung von React die Komplexität der Logik erheblich reduziert. Dies bedeutet, dass der Entwicklungsaufwand geringer ist und die Wahrscheinlichkeit von Fehlern sinkt.

2. Komponentenbildung

Virtual DOM bringt nicht nur eine einfache UI-Entwicklungslogik mit, sondern bringt auch die Idee einer komponentenbasierten Entwicklung mit sich. Die sogenannte Komponente ist ein gekapselter UI-Teil mit unabhängigen Funktionen. React empfiehlt, die UI-Zusammensetzung in Form von Komponenten zu überdenken, jedes relativ unabhängige Funktionsmodul auf der UI als Komponente zu definieren, dann kleine Komponenten zu kombinieren oder zu verschachteln, um große Komponenten zu bilden, und schließlich die Konstruktion der gesamten UI abzuschließen. Beispielsweise ist Facebooks instagram.com vollständig mit React entwickelt. Die gesamte Seite ist eine große Komponente, die eine Vielzahl weiterer verschachtelter Komponenten enthält. Wer interessiert ist, kann sich den Code dahinter einmal anschauen.

Während die MVC-Idee eine Trennung von Ansicht, Daten und Controller ermöglicht, ermöglicht die komponentenbasierte Denkweise eine Trennung zwischen UI-Funktionsmodulen. Wir verwenden eine typische Blog-Kommentarschnittstelle, um den Unterschied zwischen MVC und komponentenbasierten Entwicklungsideen zu verdeutlichen.

Für das MVC-Entwicklungsmodell definieren Entwickler die drei als unterschiedliche Klassen, um die Trennung von Präsentation, Daten und Steuerung zu erreichen. Entwickler neigen dazu, die Benutzeroberfläche aus technischer Sicht aufzuteilen, um eine lose Kopplung zu erreichen.

Für React stellt dies eine völlig neue Idee dar. Entwickler unterteilen die Benutzeroberfläche aus funktionaler Sicht in verschiedene Komponenten, und jede Komponente ist unabhängig gekapselt.

In React organisieren und schreiben Sie Ihren Code so, dass die Schnittstellenmodule natürlich aufgeteilt sind. Für die Kommentarschnittstelle ist die gesamte Benutzeroberfläche eine große Komponente, die aus kleinen Komponenten besteht. Jede Komponente kümmert sich nur um ihren eigenen Teil der Logik und ist unabhängig von den anderen.

React ist der Ansicht, dass eine Komponente die folgenden Eigenschaften haben sollte:

(1) Zusammensetzbar: Eine Komponente kann problemlos zusammen mit anderen Komponenten verwendet oder in eine andere Komponente verschachtelt werden. Wenn eine Komponente eine andere Komponente im Inneren erstellt, dann wird gesagt, dass die übergeordnete Komponente Eigentümerin der untergeordneten Komponente ist, die sie erstellt hat. Durch diese Funktion kann eine komplexe Benutzeroberfläche in mehrere einfache Benutzeroberflächenkomponenten aufgeteilt werden.

(2) Wiederverwendbar: Jede Komponente hat unabhängige Funktionen und kann in mehreren UI-Szenarien verwendet werden;

(3) Wartbar: Jede kleine Komponente enthält nur ihre eigene Logik, die leichter zu verstehen und zu warten ist;

3. Laden Sie ReactJS herunter und schreiben Sie Hallo Welt

ReactJs lässt sich sehr einfach herunterladen. Hier ist die Download-Adresse http://facebook.github.io/react/downloads.html. Nach Abschluss des Downloads wird ein komprimiertes Paket angezeigt. Nach der Dekomprimierung erstellen wir eine neue HTML-Datei und referenzieren die beiden JS-Dateien react.js und JSXTransformer.js. Die HTML-Vorlage sieht wie folgt aus (ändern Sie den JS-Pfad in Ihren eigenen):

<!DOCTYPE html>
<html>
 <Kopf>
 <script src="build/react.js"></script>
 <script src="build/JSXTransformer.js"></script>
 </Kopf>
 <Text>
 <div id="Container"></div>
 <Skripttyp="text/jsx">
  // **Hier kommt unser Code hin! **
 </Skript>
 </body>
</html>

Sie fragen sich vielleicht , warum der Skripttyp text/jsx ist. Das liegt daran, dass React seine eigene einzigartige JSX-Syntax hat, die mit JavaScript nicht kompatibel ist . Überall, wo JSX verwendet wird, sollte type="text/jsx" hinzugefügt werden. Zweitens stellt React zwei Bibliotheken bereit: react.js und JSXTransformer.js, die zuerst geladen werden müssen. Unter anderem besteht die Funktion von JSXTransformer.js darin, die JSX-Syntax in die JavaScript-Syntax zu konvertieren. Dieser Schritt ist sehr zeitaufwändig. Wenn er tatsächlich online ist, sollte er auf dem Server abgeschlossen werden.

Jetzt können wir mit dem Schreiben des Codes beginnen. Machen wir uns zunächst mit der React.render-Methode in ReactJs vertraut:

React.render ist die grundlegendste Methode von React, die verwendet wird, um die Vorlage in die HTML-Sprache zu konvertieren und in den angegebenen DOM-Knoten einzufügen.

Als nächstes schreiben wir Code in das Skript-Tag, um „Hallo Welt“ auszugeben. Der Code lautet wie folgt:

Reagieren.render(
  <h1>Hallo Welt!</h1>,
  document.getElementById('Container')
  );

Es sollte hier beachtet werden, dass React nicht auf jQuery angewiesen ist. Natürlich können wir jQuery verwenden, aber der zweite Parameter im Render muss die native getElementByID-Methode von JavaScript verwenden, und jQuery kann nicht zum Auswählen von DOM-Knoten verwendet werden.

Öffnen Sie dann diese Seite im Browser und Sie sehen, dass der Browser ein großes „Hallo Welt“ anzeigt, weil wir das Tag <h1> verwendet haben.

An diesem Punkt herzlichen Glückwunsch, Sie haben die Tür zu ReactJS betreten~~ Als nächstes lernen wir ReactJs weiter~~

4. Jsx-Syntax

Die HTML-Sprache wird direkt in der JavaScript-Sprache ohne Anführungszeichen geschrieben. Dies ist die Syntax von JSX, die das Mischen von HTML und JavaScript ermöglicht. Wenn Sie sich mit AngularJs auskennen, wird Ihnen der folgende Code sehr vertraut vorkommen. Sehen wir uns den Code an:

Variablennamen = ['Jack', 'Tom', 'Alice'];

  Reagieren.render(
  <div>
  {
   Namen.map(Funktion (Name) {
   return <div>Hallo, {name}!</div>
   })
  }
  </div>,
  document.getElementById('Container')
  );

Hier deklarieren wir ein Namensarray, durchlaufen es, fügen Hello davor ein und geben es in den DOM aus. Das Ausgabeergebnis ist wie folgt:

JSX ermöglicht das Einfügen von JavaScript-Variablen direkt in die Vorlage. Wenn die Variable ein Array ist, werden alle Mitglieder des Arrays erweitert. Der Code lautet wie folgt:

var arr = [
  <h1>Hallo Welt!</h1>,
  React ist perfekt!
  ];
  Reagieren.render(
  <div>*{arr}*</div>,
  document.getElementById('Container')
  );

Die Ergebnisse sind wie folgt:

Das Sternchen dient hier nur zur Identifizierung. Lassen Sie sich davon nicht verwirren.

Wenn Sie bis hierhin gelesen haben, bedeutet das, dass Sie sich sehr für React interessieren. Herzlichen Glückwunsch, Sie haben es bis hierhin geschafft. Jetzt beginnen wir damit, die wahren Fähigkeiten von React zu erlernen. Sind Sie bereit?

5. ReactJS-Komponenten

1. Komponenteneigenschaften

Wie bereits erwähnt, basiert ReactJS auf komponentenbasierter Entwicklung. Beginnen wir nun mit dem Erlernen der Komponenten in ReactJS. Mit React können Sie den Code in Komponenten kapseln und die Komponenten dann wie normale HTML-Tags in die Webseite einfügen. Die Methode React.createClass wird zum Generieren einer Komponentenklasse verwendet.

Als nächstes schreiben wir die erste Komponente Greet, die ein Namensattribut hat und den Wert von Hallo + Name ausgibt. Der Code lautet wie folgt:

var Greet = React.createClass({
  rendern: Funktion() {
   return <h1>Hallo {this.props.name}</h1>;
  }
  });

  Reagieren.render(
  <Begrüßung name="Jack" />,
  document.getElementById('Container')
  );

Beim Anblick dieses Codes kommt er Freunden, die bereits mit AngularJS in Berührung gekommen sind, vielleicht bekannt vor. Es gibt jedoch ein paar Punkte zu beachten:

1. Um den Wert der Eigenschaft zu erhalten, verwenden Sie this.props.property name

2. Der erste Buchstabe des erstellten Komponentennamens muss groß geschrieben werden.

3. Verwenden Sie className, wenn Sie Elementen CSS-Klassen hinzufügen.

4. Es ist auch wichtig zu beachten, wie das Style-Attribut der Komponente festgelegt wird. Es sollte wie folgt geschrieben werden: style={{width: this.state.witdh}}

2. Komponentenstatus

Komponenten interagieren zwangsläufig mit Benutzern. Eine der wichtigsten Neuerungen von React besteht darin, Komponenten als Zustandsmaschinen zu betrachten. Zu Beginn gibt es einen Anfangszustand, und dann führt die Benutzerinteraktion zu einer Zustandsänderung, wodurch eine erneute Darstellung der Benutzeroberfläche ausgelöst wird. Schreiben wir ein kleines Beispiel mit einem Textfeld und einer Schaltfläche. Durch Klicken auf die Schaltfläche können Sie den Bearbeitungsstatus des Textfelds ändern, um die Bearbeitung zu verbieten oder zuzulassen. Verwenden Sie dieses Beispiel, um den Zustandsmechanismus von ReactJS zu verstehen. Schauen wir uns zunächst den Code an:

var InputState = React.createClass({
  getInitialState: Funktion() {
   gibt {enable: false} zurück;
  },
  handleClick: Funktion(Ereignis) {
   this.setState({aktivieren: !this.state.aktivieren});
  },
  rendern: Funktion() {
   
   zurückkehren (
   <p>
    <input type="text" deaktiviert={this.state.enable} />
    <button onClick={this.handleClick}>Status ändern</button>
   </p>
   );
  }
  });

  Reagieren.render(
  <Eingabestatus />,
  document.getElementById('Container')
  );

Hier verwenden wir erneut die Methode getInitialState. Diese Funktion wird ausgeführt, wenn die Komponente initialisiert wird und muss NULL oder ein Objekt zurückgeben. Hier können wir über den Attributnamen this.state. auf den Attributwert zugreifen. Hier binden wir den aktivierten Wert an den deaktivierten Wert der Eingabe. Wenn Sie diesen Attributwert ändern möchten, verwenden Sie die Methode setState. Wir deklarieren die handleClick-Methode, um sie an die Schaltfläche zu binden und den Wert von state.enable zu ändern. Der Effekt ist wie folgt:

Prinzipanalyse:

Wenn der Benutzer auf eine Komponente klickt und dadurch den Status ändert, ändert die Methode this.setState den Statuswert. Nach jeder Änderung wird die Methode this.render automatisch aufgerufen, um die Komponente erneut zu rendern.

Hier einige erwähnenswerte Punkte:

1. Die Funktion getInitialState muss einen Rückgabewert haben, der NULL oder ein Objekt sein kann.

2. Die Methode für den Statuszugriff ist this.state.property name.

3. Variablen sind in {} eingeschlossen und es sind keine Anführungszeichen erforderlich.

3. Komponentenlebenszyklus

Der Komponentenlebenszyklus ist in drei Zustände unterteilt:

• Montage: In das reale DOM eingefügt
• Aktualisierung: wird neu gerendert
• Unmounten: Aus dem realen DOM verschoben

React stellt für jeden Zustand zwei Verarbeitungsfunktionen bereit. Die Funktion will wird vor dem Eintritt in den Zustand aufgerufen, die Funktion did wird nach dem Eintritt in den Zustand aufgerufen. Insgesamt gibt es fünf Verarbeitungsfunktionen für die drei Zustände.

• KomponenteWillMount()
• KomponenteDidMount()
• KomponenteWillUpdate(Objekt nextProps, Objekt nextState)
• componentDidUpdate(Objekt prevProps, Objekt prevState)
• componentWillUnmount()

Darüber hinaus bietet React auch zwei spezielle Funktionen zur Zustandsverarbeitung.

• componentWillReceiveProps(object nextProps): wird aufgerufen, wenn die geladene Komponente neue Parameter empfängt
• shouldComponentUpdate(object nextProps, object nextState): Wird aufgerufen, wenn die Komponente feststellt, ob sie erneut rendern soll

Schauen wir uns ein Beispiel an:

var Hallo = React.createClass({
  getInitialState: Funktion () {
   zurückkehren {
   Deckkraft: 1,0
   };
  },

  componentDidMount: Funktion () {
   dieser.Timer = setzeIntervall(Funktion () {
   var Opazität = dieser.Zustand.Opazität;
   Deckkraft -= .05;
   wenn (Deckkraft < 0,1) {
    Deckkraft = 1,0;
   }
   dies.setState({
    Opazität: Opazität
   });
   }.bind(dies), 100);
  },

  rendern: Funktion () {
   zurückkehren (
   <div Stil={{Deckkraft: dieser.Zustand.Deckkraft}}>
    Hallo {this.props.name}
   </div>
   );
  }
  });

  Reagieren.render(
  <Hallo name="Welt"/>,
  Dokument.Text
  );

Nachdem die Hello-Komponente geladen wurde, setzt der obige Code über die Methode componentDidMount einen Timer, um die Transparenz der Komponente alle 100 Millisekunden zurückzusetzen und so ein erneutes Rendering auszulösen.

4. Verschachtelung von Komponenten

React basiert auf komponentenbasierter Entwicklung. Was ist also der größte Vorteil der komponentenbasierten Entwicklung? Es besteht kein Zweifel, dass es sich um Wiederverwendung handelt. Schauen wir uns an, wie die Wiederverwendung von Komponenten in React implementiert wird. Hier schreiben wir ein Beispiel. Der Code lautet wie folgt:

var Suche = React.createClass({
  rendern: Funktion() {
   zurückkehren (
   <div>
    {this.props.searchType}:<input type="text" />
    <button>Suchen</button>
   </div>
   );
  }
  });
  var Seite = React.createClass({
  rendern: Funktion() {
   zurückkehren (
   <div>
    <h1>Willkommen!</h1>
    <Suche searchType="Titel" />
    <Suche searchType="Inhalt" />
   </div>
   );
  }
  });
  Reagieren.render(
  <Seite />,
  document.getElementById('Container')
  );

Hier erstellen wir eine Suchkomponente und dann eine Seitenkomponente. Dann rufen wir die Suchkomponente in der Seitenkomponente auf und rufen sie zweimal auf. Hier übergeben wir den Wert über das Attribut searchType und das Endergebnis wird in der Abbildung angezeigt:

6. ReactJs Zusammenfassung

Das ist alles, was wir heute über ReactJS gelernt haben. Lassen Sie uns es unten zusammenfassen. Es sind hauptsächlich die folgenden Punkte:

1. ReactJs basiert auf komponentenbasierter Entwicklung, daher sollte Ihre Seite am Ende eine große Komponente sein, die aus mehreren kleinen Komponenten besteht.

2. Sie können Werte über Attribute an die Komponente übergeben. Ebenso können Sie interne Ergebnisse über Attribute an die übergeordnete Komponente übergeben (für alle zum Lernen überlassen). Wenn Sie DOM-Operationen für Änderungen bestimmter Werte ausführen möchten, setzen Sie diese Werte in den Status.

3. Wenn Sie einer Komponente externe CSS-Stile hinzufügen, sollte der Klassenname als „className“ statt als „class“ geschrieben werden. Wenn Sie interne Stile hinzufügen, sollte er als „style={{opacity: this.state.opacity}}“ statt als „style="opacity:{this.state.opacity};“ geschrieben werden.

4. Der erste Buchstabe des Komponentennamens muss groß geschrieben werden.

5. Der Variablenname sollte in {} eingeschlossen sein und keine Anführungszeichen enthalten.

6. Referenzen

Chinesische React-Dokumentation http://reactjs.cn/

React-Tutorial für den Einstieg http://www.ruanyifeng.com/blog/2015/03/react.html

Subversion-Front-End-UI-Entwicklungsframework: React http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react

Dies ist das Ende dieses Artikels über das auf einen Blick verständliche ReactJs-Grundlagen-Tutorial – die Essenzversion. Weitere relevante Inhalte zum ReactJs-Tutorial finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!