Was ist der Gesamtprozess von React? Einführung in den Gesamtprozess von React (mit Beispielen)

Dieser Artikel stellt hauptsächlich den Gesamtprozess von React vor. Schauen wir uns diesen Artikel gemeinsam an

Komponentisierung von React

Eine Komponente von React ist offensichtlich zusammengesetzt von Dom-Ansicht und Zustandsdaten, und die beiden Teile sind unterschiedlich. „State“ ist das Rechenzentrum und sein Status bestimmt den Status der Ansicht. Zu diesem Zeitpunkt stellte ich fest, dass es sich ein wenig von dem MVC-Entwicklungsmodell zu unterscheiden scheint, das wir immer bewundert haben. Wie geht man ohne den Controller mit der Benutzerinteraktion um und wer verwaltet Datenänderungen? Dies ist jedoch nicht das, worum es bei React geht, es ist nur für die Darstellung der Benutzeroberfläche verantwortlich. Im Gegensatz zu anderen Frameworks, die Daten abhören und den Dom dynamisch ändern, verwendet React setState, um die Aktualisierung der Ansicht zu steuern. setState ruft automatisch die Renderfunktion auf, um das erneute Rendern der Ansicht auszulösen. Wenn sich nur die Statusdaten ändern, ohne setState aufzurufen, wird keine Aktualisierung ausgelöst. Eine Komponente ist ein Ansichtsmodul mit unabhängigen Funktionen. Viele kleine Komponenten bilden eine große Komponente, und die gesamte Seite besteht aus Komponenten. Seine Vorteile sind Wiederverwendung und Wartung.

Diff-Algorithmus von React

Wo wird der Diff-Algorithmus von React verwendet? Wenn die Komponente aktualisiert wird, erstellt React einen neuen virtuellen DOM-Baum und vergleicht ihn mit dem zuvor gespeicherten DOM-Baum. Dieser Prozess verwendet den Diff-Algorithmus, sodass er bei der Initialisierung der Komponente nicht verwendet wird. React geht davon aus, dass dieselben Komponenten ähnliche Strukturen haben, während unterschiedliche Komponenten unterschiedliche Strukturen haben. Führen Sie basierend auf dieser Annahme einen Schicht-für-Schicht-Vergleich durch. Wenn sich herausstellt, dass die entsprechenden Knoten unterschiedlich sind, löschen Sie direkt den alten Knoten und alle darin enthaltenen untergeordneten Knoten und ersetzen Sie ihn durch den neuen Knoten. Wenn es sich um denselben Knoten handelt, werden nur die Attribute geändert.
Der Diff-Algorithmus für Listen ist etwas anders, da Listen normalerweise die gleiche Struktur haben. Beim Löschen, Einfügen und Sortieren von Listenknoten ist die Gesamtoperation eines einzelnen Knotens viel besser als der Vergleich jedes Ersetzens einzeln Beim Erstellen der Liste müssen Sie den Schlüsselwert festlegen, damit React erkennen kann, wer wer ist. Natürlich ist es in Ordnung, den Schlüsselwert nicht zu schreiben, aber dies gibt normalerweise eine Warnung aus, die uns auffordert, den Schlüsselwert hinzuzufügen, um die Leistung von React zu verbessern.

Wie entstehen Reaktionskomponenten?

Die Erstellungsmethode von Komponenten ist React.createClass() – um eine Klasse zu erstellen, hat das Reaktionssystem intern ein Klassensystem entworfen und verwendet Es dient zum Erstellen von Reaktionskomponenten. Dies ist jedoch nicht erforderlich, um Komponenten zu erstellen. Dies ist auch die offiziell von Facebook empfohlene Schreibweise.

Die beiden Schreibmethoden erfüllen die gleiche Funktion, aber die Prinzipien sind unterschiedlich. Sie können die Klasse es6 sehen Als Syntaxzucker für den Konstruktor können Sie sich vorstellen, dass ein Konstruktor die Vererbung zwischen Klassen erweitert. Definieren Sie eine Klasse Main, um alle Eigenschaften und Methoden von React.Component zu erben. Von hier aus beginnt die Lebenszyklusfunktion der Komponente . Kommen. Konstruktor ist ein Konstruktor, der beim Instanziieren eines Objekts aufgerufen wird. Super ruft den Konstruktor der übergeordneten Klasse auf, um das Instanzobjekt der übergeordneten Klasse zu erstellen, und verwendet dann den Konstruktor der Unterklasse, um es zu ändern. Dies unterscheidet sich von der prototypischen Vererbung von es5. Bei der prototypischen Vererbung wird zunächst ein instanziiertes Objekt erstellt und dann die Prototyp-Methode des übergeordneten Objekts geerbt. Nachdem wir dies verstanden haben, werden wir bei der Betrachtung der Komponenten viel klarer sein.

Wenn wir die Komponente verwenden, handelt es sich tatsächlich um eine Instanziierung der Main-Klasse – new Main, aber React kapselt diesen Prozess, damit er eher wie ein Label aussieht. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der PHP Chinese-Website, um mehr zu erfahren)

Es gibt drei Punkte, die es zu beachten gilt: 1. Der erste Buchstabe des Definitionsklassennamens muss groß geschrieben werden 2. Da class ohne das Schlüsselwort wird, muss der Klassenselektor durch className ersetzt werden. 3. Klassen und Module verwenden standardmäßig den strikten Modus, daher ist es nicht erforderlich, den Ausführungsmodus mit „use strict“ anzugeben.

Lebenszyklus der Komponente

Die Komponente löst während der Initialisierung 5 Hook-Funktionen aus:

1.

Standard-Requisiten festlegen Sie können auch dufaultProps verwenden, um die Standardeigenschaften der Komponente festzulegen.

2. getInitialState()

Bei Verwendung der Klassensyntax von es6 gibt es diese direkt in der Konstruktor .state. This.props ist jetzt zugänglich.

3. ComponentWillMount()

wird nur aufgerufen, wenn die Komponente aktualisiert wird wird im gesamten Lebenszyklus nur einmal aufgerufen. Zu diesem Zeitpunkt kann der Status geändert werden.

4. render()

Die wichtigsten Schritte zum Reagieren, Erstellen eines virtuellen Doms, Durchführen des Diff-Algorithmus und Aktualisieren des Dom-Baums sind alle hier gemacht. Zu diesem Zeitpunkt kann der Status nicht geändert werden.

5. ComponentDidMount()

wird aufgerufen, nachdem die Komponente gerendert wurde. Sie können den Dom-Knoten über this.getDOMNode( abrufen und bedienen. ), die nur einmal aufgerufen wird.

löst beim Aktualisieren außerdem 5 Hook-Funktionen aus:

6. ComponentWillReceivePorps(nextProps)

Wird nicht aufgerufen, wenn die Komponente initialisiert wird, sondern aufgerufen, wenn die Komponente neue Requisiten akzeptiert.

7. ShouldComponentUpdate(nextProps, nextState)

Ein sehr wichtiger Teil der Reaktionsleistungsoptimierung. Wird aufgerufen, wenn die Komponente einen neuen Status oder neue Requisiten akzeptiert. Wir können festlegen, ob die beiden Requisiten und der Status vor und nach dem Vergleich gleich sind. Wenn sie gleich sind, geben Sie false zurück, um die Aktualisierung zu verhindern, da derselbe Attributstatus definitiv dasselbe generiert DOM-Baum, daher ist es nicht erforderlich, einen neuen DOM-Baum zu erstellen und den alten DOM-Baum mit dem Diff-Algorithmus zu vergleichen, was viel Leistung spart, insbesondere wenn die DOM-Struktur komplex ist. Durch den Aufruf von this.forceUpdate wird dieser Schritt jedoch übersprungen.

8. ComponentWillUpdata(nextProps, nextState)

Wird nicht aufgerufen, wenn die Komponente initialisiert wird Wird gerade aktualisiert. Zu diesem Zeitpunkt können Sie den Status ändern

9 🎜>

10. ComponentDidUpdate( )

wird nicht aufgerufen, wenn die Komponente initialisiert wird, sondern nach Abschluss der Komponentenaktualisierung Knoten erhalten werden kann.

Es gibt auch eine Deinstallations-Hook-Funktion

11. ComponentWillUnmount()

Wird aufgerufen, wenn die Bereitstellung der Komponente beendet werden soll. Zu diesem Zeitpunkt müssen einige Ereignis-Listener und Timer gelöscht werden.

Wie aus dem Obigen hervorgeht, verfügt React über insgesamt 10 periodische Funktionen (Rendern wird einmal wiederholt). Bei richtiger Verwendung können sie alle unsere Anforderungen erfüllen Verbesserung der Entwicklungseffizienz und Komponentenleistung.

React-Router-Routing

Router und Route sind Komponenten von React. Es handelt sich lediglich um ein Konfigurationsobjekt, das interne Routing-Regeln erstellt und die entsprechende Routing-Adresse entsprechend anzeigt passende Routing-Adresskomponenten. Route bindet Routing-Adressen und Komponenten. Route hat eine Verschachtelungsfunktion, die die umfassende Beziehung von Routing-Adressen angibt. Dies steht nicht in direktem Zusammenhang mit der Verschachtelung zwischen Komponenten. Route kann 7 Attribute an die gebundene Komponente übergeben: Kinder, Verlauf, Standort, Parameter, Route, RouteParams, Routen. Jedes Attribut enthält Routing-bezogene Informationen. Die am häufigsten verwendeten sind Kinder (Komponenten, die sich durch die Inklusionsbeziehung des Routings unterscheiden), Standort (einschließlich Adresse, Parameter, Adressumschaltmethode, Schlüsselwert, Hash-Wert). React-Router stellt das Link-Tag bereit, das lediglich eine Kapselung des a-Tags ist. Es ist erwähnenswert, dass das Klicken auf einen Link zum Springen nicht die Standardmethode ist, die das Standardverhalten des a-Tags verhindert Ändern Sie den Hash-Wert. Der Vorgang des Seitenwechsels besteht darin, dass beim Klicken auf die Link-Beschriftung oder auf die Schaltfläche „Zurück vorwärts“ zunächst die Adressänderung überwacht und diese entsprechend dem Pfadattribut der Route mit der entsprechenden Komponente abgeglichen wird value an die entsprechende Komponente und ruft setState auf, um die Renderfunktion auszulösen, um den Dom neu zu rendern.

Wenn es viele Seiten gibt, wird das Projekt immer größer. Insbesondere bei Einzelseitenanwendungen ist die anfängliche Rendergeschwindigkeit sehr langsam und muss nur bei Bedarf geladen werden Der Weg besteht darin, zur Seite zu wechseln und dann die entsprechende js-Datei zu laden. Die Methode zum Reagieren auf Laden bei Bedarf mit Webpack ist sehr einfach. Ändern Sie die Komponente von Route in getComponent, rufen Sie die Komponente mit require.ensure ab und konfigurieren Sie chunkFilename im Webpack.

const chooseProducts = (location, cb) => {
require.ensure([], require => {
    cb(null, require('../Component/chooseProducts').default)
},'chooseProducts')
}

const helpCenter = (location, cb) => {
require.ensure([], require => {
    cb(null, require('../Component/helpCenter').default)
},'helpCenter')
}

const saleRecord = (location, cb) => {
require.ensure([], require => {
    cb(null, require('../Component/saleRecord').default)
},'saleRecord')
}

const RouteConfig = (
<router>
    <route>
        <indexroute></indexroute>//首页
        <route></route>
        <route></route>//帮助中心
        <route></route>//销售记录
        <redirect></redirect>
    </route>
</router>
);

Kommunikation zwischen Komponenten

React befürwortet einen unidirektionalen Datenfluss, der Daten von oben nach unten, aber von unten nach oben oder zwischen Komponenten überträgt, die nicht im selben Datenfluss kommunizieren zwischen ihnen wird kompliziert. Es gibt viele Möglichkeiten, das Kommunikationsproblem zu lösen. Wenn nur eine Eltern-Kind-Beziehung besteht, kann das Elternteil eine Rückruffunktion als Attribut an das Kind übergeben, und das Kind kann die Funktion direkt aufrufen, um mit dem Elternteil zu kommunizieren.

Wenn die Komponentenebene tief verschachtelt ist, können Sie den Kontext verwenden, um Informationen weiterzugeben. Auf diese Weise ist es nicht erforderlich, Funktionen Schicht für Schicht weiterzugeben, und es kann direkt über diesen Kontext zugegriffen werden . .

Komponenten in einer Geschwisterbeziehung können nicht direkt miteinander kommunizieren. Sie können nur den Vorgesetzten derselben Ebene als Übertragungsstation verwenden. Und wenn die Geschwisterkomponenten die Komponenten der höchsten Ebene sind, müssen sie eine weitere Komponentenschicht auf ihrer äußeren Schicht haben. Diese äußere Komponente spielt tatsächlich die Rolle der Redux tut.

Informationen zwischen Komponenten können auch über globale Ereignisse weitergegeben werden. Verschiedene Seiten können Daten über Parameter übergeben, und die nächste Seite kann sie mithilfe von location.query abrufen.

Lass uns zuerst über Redux sprechen:

Redux besteht hauptsächlich aus drei Teilen: Store, Reducer und Action.

Store ist ein Objekt, das vier Hauptmethoden hat:

1. Versand:

用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步。

2、subscribe：

监听state的变化——这个函数在store调用dispatch时会注册一个listener监听state变化，当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听。
let unsubscribe = store.subscribe(() => {console.log('state发生了变化')})

3、getState：

获取store中的state——当我们用action触发reducer改变了state时，需要再拿到新的state里的数据，毕竟数据才是我们想要的。getState主要在两个地方需要用到，一是在dispatch拿到action后store需要用它来获取state里的数据，并把这个数据传给reducer，这个过程是自动执行的，二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据，如果做到这一步，说明我们已经成功了。

4、replaceReducer:

替换reducer，改变state修改的逻辑。

store可以通过createStore()方法创建，接受三个参数，经过combineReducers合并的reducer和state的初始状态以及改变dispatch的中间件，后两个参数并不是必须的。store的主要作用是将action和reducer联系起来并改变state。

action是一个对象，其中type属性是必须的，同时可以传入一些数据。action可以用actionCreactor进行创造。dispatch就是把action对象发送出去。

reducer是一个函数，它接受一个state和一个action，根据action的type返回一个新的state。根据业务逻辑可以分为很多个reducer，然后通过combineReducers将它们合并，state树中有很多对象，每个state对象对应一个reducer，state对象的名字可以在合并时定义。

像这个样子：

const reducer = combineReducers({
     a: doSomethingWithA,
     b: processB,
     c: c
})

combineReducers其实也是一个reducer，它接受整个state和一个action，然后将整个state拆分发送给对应的reducer进行处理，所有的reducer会收到相同的action，不过它们会根据action的type进行判断，有这个type就进行处理然后返回新的state，没有就返回默认值，然后这些分散的state又会整合在一起返回一个新的state树。

接下来分析一下整体的流程，首先调用store.dispatch将action作为参数传入，同时用getState获取当前的状态树state并注册subscribe的listener监听state变化，再调用combineReducers并将获取的state和action传入。combineReducers会将传入的state和action传给所有reducer，reducer会根据state的key值获取与自己对应的state，并根据action的type返回新的state，触发state树的更新，我们调用subscribe监听到state发生变化后用getState获取新的state数据。

redux的state和react的state两者完全没有关系，除了名字一样。

上面分析了redux的主要功能，那么react-redux到底做了什么？

react-redux

如果只使用redux，那么流程是这样的：

component --> dispatch(action) --> reducer --> subscribe --> getState --> component

用了react-redux之后流程是这样的：

component --> actionCreator(data) --> reducer --> component

store的三大功能：dispatch，subscribe，getState都不需要手动来写了。react-redux帮我们做了这些，同时它提供了两个好基友Provider和connect。

Provider是一个组件，它接受store作为props，然后通过context往下传，这样react中任何组件都可以通过contex获取store。也就意味着我们可以在任何一个组件里利用dispatch(action)来触发reducer改变state，并用subscribe监听state的变化，然后用getState获取变化后的值。但是并不推荐这样做，它会让数据流变的混乱，过度的耦合也会影响组件的复用，维护起来也更麻烦。

connect --connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一个函数，它接受四个参数并且再返回一个函数--wrapWithConnect，wrapWithConnect接受一个组件作为参数wrapWithConnect(component)，它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。

所以它的完整写法是这样的：connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)

mapStateToProps(state, [ownProps])：

mapStateToProps 接受两个参数，store的state和自定义的props，并返回一个新的对象，这个对象会作为props的一部分传入ui组件。我们可以根据组件所需要的数据自定义返回一个对象。ownProps的变化也会触发mapStateToProps

function mapStateToProps(state) {
   return { todos: state.todos };
}

mapDispatchToProps(dispatch, [ownProps])：

mapDispatchToProps如果是对象，那么会和store绑定作为props的一部分传入ui组件。如果是个函数，它接受两个参数，bindActionCreators会将action和dispatch绑定并返回一个对象，这个对象会和ownProps一起作为props的一部分传入ui组件。所以不论mapDispatchToProps是对象还是函数，它最终都会返回一个对象，如果是函数，这个对象的key值是可以自定义的

function mapDispatchToProps(dispatch) {
   return {
      todoActions: bindActionCreators(todoActionCreators, dispatch),
      counterActions: bindActionCreators(counterActionCreators, dispatch)
   };
}

mapDispatchToProps返回的对象其属性其实就是一个个actionCreator，因为已经和dispatch绑定，所以当调用actionCreator时会立即发送action，而不用手动dispatch。ownProps的变化也会触发mapDispatchToProps。

mergeProps(stateProps, dispatchProps, ownProps)：

Führen Sie die von mapStateToProps() und mapDispatchToProps() zurückgegebenen Objekte und die eigenen Requisiten der Komponente zu neuen Requisiten zusammen und übergeben Sie sie an die Komponente. Das Ergebnis von Object.assign({}, OwnProps, StateProps, DispatchProps) wird standardmäßig zurückgegeben.

Optionen:

pure = true bedeutet, dass die Connect-Container-Komponente einen flachen Vergleich des Store-Status und der ownProps in ShouldComponentUpdate durchführt, um dies zu ermitteln ob Änderungen vorgenommen werden, um die Leistung zu optimieren. Bei „false“ wird kein Vergleich durchgeführt.

Tatsächlich führt connect nichts aus. Der größte Teil der Logik wird in der von ihm zurückgegebenen Funktion „wrapWithConnect“ implementiert. Genauer gesagt wird sie in der in „wrapWithConnect“ definierten Connect-Komponente implementiert.

Das Folgende ist ein vollständiger Reaktions--> Redux--> Reaktionsprozess:

1. Die Provider-Komponente akzeptiert den Redux-Speicher als Requisiten und leitet ihn dann durch den Kontext weiter.

2. Die Connect-Funktion bindet das MapDispatchToProps-Objekt während der Initialisierung an den Store. Nachdem die Connect-Komponente den Store abgerufen hat, wird sie über bindActionCreators entsprechend dem eingehenden Store.dispatch gebunden Aktion. Binden Sie dann das zurückgegebene Objekt an den Store. Gleichzeitig wird wrapWithConnect aufgerufen und eine UI-Komponente übergeben. WrapWithConnect verwendet intern die Klasse Connect. Die Komponente definiert eine Connect-Komponente und ist eine Unterkomponente von Connect. Anschließend erhält die Connect-Komponente den Store über den Kontext und erhält das vollständige Statusobjekt über store.getState und gibt das stateProps-Objekt mapDispatchToProps zurück Objekt oder Die Funktion „MapDispatchToProps“ gibt ein DispatchProps-Objekt zurück. Die Requisiten der StateProps-, DispatchProps- und Connect-Komponente werden über Object.assign() oder mergeProps zu Requisiten zusammengeführt und an die UI-Komponente übergeben. Rufen Sie dann store.subscribe in ComponentDidMount auf und registrieren Sie eine Rückruffunktion handleChange, um Statusänderungen zu überwachen.

3. Zu diesem Zeitpunkt kann die UI-Komponente den ActionCreator in den Requisiten finden. Beim Dispatch wird getState aufgerufen, um den gesamten Status abzurufen wird registriert, um Zustandsänderungen zu überwachen. CombineReducers gibt den Zustand entsprechend dem Schlüsselwert des Zustands weiter und übergibt die Aktion an alle Unterreduzierer nacheinander ausgeführt werden, um den Aktionstyp zu beurteilen, und zurückgeben, wenn es einen neuen Status gibt, oder den Standardstatus, wenn keiner vorhanden ist. CombineReducers kombiniert erneut die einzelnen Zustände, die von den untergeordneten Reduzierern zurückgegeben werden, zu einem neuen vollständigen Zustand. Zu diesem Zeitpunkt hat sich der Zustand geändert. Das in der Connect-Komponente aufgerufene Abonnement überwacht die Statusänderung und ruft dann die Funktion handleChange auf. Intern ruft die Funktion handleChange zunächst getState auf, um den neuen Statuswert abzurufen, und führt einen oberflächlichen Vergleich zwischen dem alten und dem neuen Status durch Sind sie gleich, kehren sie direkt zurück. Rufen Sie mapStateToProps auf und vergleichen Sie kurz die alten und neuen stateProps. Wenn sie nicht identisch sind, rufen Sie this.setState() auf, um die Aktualisierung der Connect-Komponente auszulösen, übergeben Sie die UI-Komponente und lösen Sie die Aktualisierung der UI-Komponente aus. Zu diesem Zeitpunkt erhält die UI-Komponente neue Requisiten und reagiert --> redux --> Der einmalige Prozess endet.

Das Obige ist etwas kompliziert:

1 Die Provider-Komponente akzeptiert den Redux-Store als Requisiten und gibt ihn dann weiter durch den Kontext.

2. Die Connect-Funktion empfängt den Store vom Provider, akzeptiert dann die drei Parameter mapStateToProps, mapDispatchToProps und die Komponente und übergibt state und actionCreator als Requisiten an die Komponente. Zu diesem Zeitpunkt kann die Komponente die actionCreator-Funktion aufrufen Auslösen: Die Reduzierfunktion gibt den neuen Status zurück. Connect lauscht auf die Statusänderung und ruft setState auf, um die Komponente zu aktualisieren und den neuen Status an die Komponente zu übergeben.

Connect kann sehr prägnant geschrieben werden. MapStateToProps und MapDispatchToProps sind nur die übergebenen Rückruffunktionen. Die Connect-Funktion ruft sie bei Bedarf auf. Der Name ist nicht festgelegt und Sie müssen nicht einmal einen Namen schreiben.

Vereinfachte Version: connect(state => state, action)(Component);

Projektkonstruktion

Die oben genannten Wissenspunkte zu React, React-Router und Redux . Aber wie integriert man sie, um ein vollständiges Projekt aufzubauen?

1. Zitieren Sie zunächst grundlegende Dateien wie „react.js“, „redux“, „react-router“ usw. Es wird empfohlen, sie mit npm zu installieren und direkt in der Datei zu zitieren.

2. Stellen Sie die erforderlichen Objekte und Methoden von React.js, Redux und React-Router vor.

React, {Component, PropTypes} aus 'react' importieren;
ReactDOM, {render} aus 'react-dom' importieren;
{Provider, connect} aus 'react-redux' importieren ;
import {createStore, combineReducers, applyMiddleware} from 'redux';
import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from 'react-router';

3 Es ist notwendig, UI-Komponenten der obersten Ebene zu erstellen, und jede UI-Komponente der obersten Ebene entspricht einer Seite.

4. Erstellen Sie ActionCreators und Reducer und verwenden Sie CombineReducers, um alle Reducer zu einem großen Reducer zusammenzuführen. Verwenden Sie createStore, um einen Store zu erstellen und combineReducers und applyMiddleware einzuführen.

5. Verwenden Sie connect, um actionCreator, reuder mit der UI-Komponente der obersten Ebene zu verknüpfen und eine neue Komponente zurückzugeben.

6. Verwenden Sie die von connect zurückgegebenen neuen Komponenten, um mit React-Router zusammenzuarbeiten, um Routing bereitzustellen und einen Routing-Komponenten-Router zurückzugeben.

7. Fügen Sie Router in die Top-Level-Komponente Provider ein und führen Sie Store als Attribut des Providers ein.

8. Rufen Sie render auf, um die Provider-Komponente zu rendern und in das Tag der Seite einzufügen.

Sie können sehen, dass die UI-Komponente der obersten Ebene tatsächlich mit vier Komponentenebenen bedeckt ist: Provider, Router, Route und Connect. Diese vier bewirken keine Änderungen an der Ansicht, sie sind nur funktional.

Wenn wir Requisiten auf der UI-Komponente der obersten Ebene drucken, können wir normalerweise eine Reihe von Eigenschaften sehen:

Die UI-Komponente der obersten Ebene in der Das Bild oben enthält insgesamt 18 Eigenschaften. Wenn Sie neu sind, wissen Sie möglicherweise nicht, woher diese Attribute stammen. Tatsächlich stammen diese Attribute von fünf Stellen:

1 benutzerdefiniertes Attribut der Komponente. 6 vom ActionCreator zurückgegebene Objekte, 4 vom Reduzierer zurückgegebene Zustände und Connect. Es gibt 0 Komponentenattribute und 7 vom Router injizierte Attribute.

Fassen Sie die Fallstricke und einige kleine Wissenspunkte zusammen, auf die Sie bei der Reaktion stoßen.

Bei der Verwendung von React stoßen Sie häufig auf verschiedene Probleme. Wenn Sie mit React nicht vertraut sind, werden Sie auf das Problem stoßen, das verwirrend und hilflos ist. Lassen Sie uns als Nächstes die Probleme und Aufmerksamkeitspunkte analysieren, auf die bei der Reaktion leicht zu stoßen ist.

1. setState() ist asynchron
this.setState() ruft die Render-Methode auf, ändert jedoch nicht sofort den Statuswert in der Render-Methode. Daher bleibt der Statuswert, der unmittelbar nach der Ausführung von this.setState() erhalten wird, unverändert. Die gleiche direkte Zuweisung des Status löst die Aktualisierung nicht aus, da die Renderfunktion nicht aufgerufen wird.

2. Komponentenlebenszyklus
componentWillMount und ComponentDidMount werden nur während der Initialisierung aufgerufen.
componentWillReceivePorps, ShouldComponentUpdate, ComponentWillUpdata, ComponentDidUpdate werden nur aufgerufen, wenn die Komponente aktualisiert wird, nicht während der Initialisierung.

3. Der Reduzierer muss ein neues Objekt zurückgeben, um Komponentenaktualisierungen zu initiieren.
Denn in der Verbindungsfunktion wird ein flacher Vergleich des alten und des neuen Status durchgeführt Wenn sich die Referenzadresse nicht ändert, betrachtet Connect sie als gleich und löst keine Aktualisierung aus.

4. Unabhängig davon, ob sich der vom Reduzierer zurückgegebene Status ändert, werden alle im Abonnement registrierten Rückruffunktionen ausgelöst.

5. Der erste Buchstabe des Komponentennamens muss großgeschrieben werden. Dies ist der Standard für die Klassenbenennung.

6. Bevor die Komponente deinstalliert wird, müssen die dem DOM-Element hinzugefügten Abhörereignisse und Timer manuell gelöscht werden, da diese nicht im Kontrollbereich von React liegen und manuell gelöscht werden müssen.

7. Wenn die Komponente beim Laden bei Bedarf über den Exportstandard verfügbar gemacht wird, muss „default“ zu „require.ensure“ hinzugefügt werden.

require.ensure([], require => {
    cb(null, require('../Component/saleRecord').default)
},'saleRecord')

8、react的路由有hashHistory和browserHistory，hashHistory由hash#控制跳转，一般用于正式线上部署，browserHistory就是普通的地址跳转，一般用于开发阶段。

9、标签里用到的，for 要写成htmlFor，因为for已经成了关键字。

10、componentWillUpdate中可以直接改变state的值，而不能用setState。

11、如果使用es6class类继承react的component组件，constructor中必须调用super，因为子类需要用super继承component的this，否则实例化的时候会报错。

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

Das obige ist der detaillierte Inhalt vonWas ist der Gesamtprozess von React? Einführung in den Gesamtprozess von React (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!