Eine ausführliche Diskussion der Front-End-Framework-React_Javascript-Techniken

Zusammenfassung:

Kürzlich plant das Unternehmen, eine in die App eingebettete Anwendung zu erstellen, und erwägt, die Reaktion von Facebook zu nutzen, um die Ansicht zu entwickeln, also habe ich einige Nachforschungen angestellt. Im Folgenden sind die Fallstricke aufgeführt, auf die ich während der Entwicklung gestoßen bin. Ich hoffe, dass sie Ihnen helfen können.

Projektadresse: https://github.com/baixuexiyang/react
Problem:https://github.com/baixuexiyang/react/issues

Willkommen bei Star and Fork!

React-Vorteile:

•Drücken Sie einfach aus, wie Ihre Anwendung zu jedem Zeitpunkt aussehen soll, und wenn sich die zugrunde liegenden Daten ändern, verarbeitet React automatisch alle Aktualisierungen der Benutzeroberfläche.

•Nach den Datenänderungen ähnelt React konzeptionell dem Klicken auf die Schaltfläche „Aktualisieren“, jedoch werden nur die geänderten Teile aktualisiert.

•Bei React geht es darum, wiederverwendbare Komponenten zu erstellen und die Wiederverwendung von Code, das Testen und die Trennung von Bedenken zu vereinfachen.

Hinweis:

1. Schreiben Sie den ersten Buchstaben der geladenen Komponente groß, zum Beispiel:
2. Die äußerste Putzschicht jedes Bauteils muss über ein Umhüllungselement

verfügen

3.this.props kann nicht geändert werden, aber this.state kann geändert werden

4. Das oclick-Ereignis der Seite funktioniert in Safari unter iOS nicht. onClick={this.detail.bind(this, item)} muss andere Methoden verwenden, z. B. das Bindungsereignis von jQuery

5.Konvertieren Sie die Zeichenfolge in HTML, hazardlySetInnerHTML={{__html: ''}}

6.getInitialState: Wird einmal aufgerufen, bevor die Komponente gemountet wird. Der Rückgabewert wird als Anfangswert von this.state verwendet.

getDefaultProps: Wird einmal aufgerufen, wenn die Komponentenklasse erstellt wird, und dann wird der Rückgabewert zwischengespeichert. Wenn die übergeordnete Komponente in props keinen Schlüssel angibt, wird die entsprechende Eigenschaft im hier zurückgegebenen Objekt in this.props zusammengeführt (verwenden Sie in, um die Eigenschaft zu erkennen).

Diese Methode wird aufgerufen, bevor eine Instanz erstellt wird, und kann sich daher nicht auf this.props verlassen. Darüber hinaus werden alle von getDefaultProps() zurückgegebenen komplexen Objekte zwischen Instanzen gemeinsam genutzt, anstatt dass es eine Kopie pro Instanz gibt.

Komponentenlebenszyklus:

ComponentWillMount:

Sowohl der Server als auch der Client werden nur einmal aufgerufen, unmittelbar vor der ersten Rendering-Ausführung.

ComponentDidMount:

Wird unmittelbar nach der ersten Rendering-Ausführung einmal aufgerufen und ist nur auf der Clientseite gültig (auf der Serverseite wird es nicht aufgerufen).

ComponentWillReceiveProps:

Wird aufgerufen, wenn die Komponente neue Requisiten erhält. Diese Methode wird beim ersten Rendern nicht aufgerufen.

ShouldComponentUpdate:

Wird aufgerufen, nachdem vor dem Rendern neue Requisiten oder ein neuer Zustand empfangen wurden. Diese Methode wird weder bei der Initialisierung des Renderings noch bei Verwendung der Methode „forceUpdate“ aufgerufen.

Wenn festgestellt wird, dass die neuen Requisiten und der neue Status nicht dazu führen, dass die Komponente aktualisiert wird, sollte hier „false“ zurückgegeben werden.

componentWillUpdate：

Unmittelbar vor Erhalt neuer Requisiten oder Status angerufen. Diese Methode wird beim ersten Rendern nicht aufgerufen.

ComponentDidUpdate:

Wird sofort aufgerufen, nachdem die Aktualisierungen der Komponente mit dem DOM synchronisiert wurden. Diese Methode wird beim Initialisieren des Renderings nicht aufgerufen.

componentWillUnmount：

Wird sofort aufgerufen, wenn die Komponente aus dem DOM entfernt wird.

Zusammenfassung:

Bei der Entwicklung mit React wird der gesamte HTML-Code in JS-Dateien geschrieben, sodass die Entwicklung nicht sehr reibungslos verläuft. Empfehlen Sie ein Chrome-Plug-in: React Developer Tools

Es gibt einige Missverständnisse über React. Lassen Sie mich sie hier zusammenfassen:

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 Renderfähigkeit von React kann nur als Sahnehäubchen betrachtet werden, nicht als zentraler Ausgangspunkt. Tatsächlich wird die Anwendung auf der Serverseite kaum erwähnt

Manche Leute vergleichen React mit Web Component, aber die beiden sind nicht völlig konkurrenzfähig. Sie können React verwenden, um eine echte Webkomponente zu entwickeln

React ist keine neue Vorlagensprache, sondern nur eine Darstellung, die ohne JSX funktionieren kann.

Das Obige ist das gesamte Wissen über die Reaktion des Front-End-Frameworks. Ich hoffe, es gefällt Ihnen.