reagieren von Facebook ist eine sehr schöne Bibliothek zum Erstellen von Benutzeroberflächen. Das einzige Problem ist, dass React egal ist, wie Ihre Anwendung mit den Daten umgeht. Die meisten Menschen verwenden React als V in MV*. So führte Facebook ein Muster namens Flux ein, das einen funktionalen Ansatz für die Datenhandhabung in einer App verleiht. Dieses Tutorial gibt eine kurze Einführung in das Flussmuster und zeigt, wie Sie eine Note erstellen, die die App mit React und Flux -Architektur nimmt.
Fluss basiert auf dem unidirektionalen Datenfluss. Wir haben zwei Schlüsselkomponenten im Flussmuster:
Um das Konzept zu verstärken, nehme wir ein Beispiel in der realen Welt. In einer App -App -App können Sie beispielsweise die folgende Anordnung haben:
Der Datenfluss kann also wie folgt visualisiert werden:
Der größte Vorteil des Flussmusters besteht darin, dass Ihre Anwendungsdaten flach bleiben. Da Mutation nur durch Aktionen durchgeführt werden kann, ist es einfacher zu verstehen, wie sich die Datenänderung auf die gesamte Anwendung auswirkt.
Hinweis:
Wenn Sie Facebooks Leitfaden zum Fluss durchlaufen haben, haben Sie möglicherweise das Konzept eines Dispatcher bemerkt. Ein Dispatcher ist eine Registrierung von Rückernläufen in die Geschäfte. Wenn eine Aktion aufgerufen wird, antwortet der Dispatcher darauf und sendet die zugehörigen Daten an alle registrierten Geschäfte. Speichern Sie sich dann den Aktionsart und führen Sie Aufgaben entsprechend aus.
Der obige Prozess wurde durch eine Bibliothek namens Reflux stark vereinfacht. Es entfernt das Konzept der Disponenten, indem es die Aktionen hörbar macht. In Reflux können Geschäfte also direkt auf Aktionen anhören und auf ihre Aufruf reagieren.
Um das Flussmuster vollständig zu verstehen
Einrichten einer Entwicklungsumgebung
grunt watch grunt nodemon
in der App
Verwenden wir Reflux, um einige Aktionen zu erstellen. Wenn Sie Aktionen/Notakaten.js öffnen, können Sie sehen, wie Aktionen erstellt werden. Hier ist der Ausschnitt:
grunt watch grunt nodemon
reflux.createActions wird verwendet, um Aktionen zu erstellen. Wir exportieren diese Aktionen, um sie in unseren Komponenten zu verwenden.
Wir haben einen einzelnen Laden namens Notestore, der eine Reihe von Notizen unterhält. Der folgende Code wird zum Erstellen des Speichers verwendet (Stores/Notestore.js):
<span>var Reflux = require('reflux');
</span>
<span>var NoteActions = Reflux.createActions([
</span> <span>'createNote',
</span> <span>'editNote'
</span><span>]);
</span>
module<span>.exports = NoteActions;</span>Wie Sie sehen, hören wir uns zwei Aktionen, CreateNote und EditNote, innerhalb der Init -Methode an. Wir registrieren auch Rückrufe, um auszuführen, wenn Aktionen aufgerufen werden. Der Code zum Hinzufügen/Aktualisieren einer Notiz ist ziemlich einfach. Wir stellen auch Getter aus, um die Liste von Notizen abzurufen. Schließlich wird das Geschäft so exportiert, damit er in unserer Komponente verwendet werden kann.
Alle unsere React -Komponenten befinden sich im React-/Komponentenverzeichnis. Ich habe bereits die Gesamtstruktur der Benutzeroberfläche gezeigt. Sie können den heruntergeladenen Quellcode überprüfen, um mehr über jede Komponente zu erfahren. Hier zeige ich Ihnen das Schlüsselsache (d. H. Wie unsere Komponenten Aktionen aufrufen und mit dem Geschäft interagieren).
NotelistBox:
Diese Komponente erhält eine Liste von Notizen von Notestore und füttert sie an die NOTELIST -Komponente, die dann die Notizen rendert. So sieht die Komponente aus:
<span>var Reflux = require('reflux');
</span><span>var NoteActions = require('../actions/NoteActions');
</span>
<span>var _notes = []; //This is private notes array
</span>
<span>var NoteStore = Reflux.createStore({
</span> <span>init: function() {
</span> <span>// Here we listen to actions and register callbacks
</span> <span>this.listenTo(NoteActions.createNote, this.onCreate);
</span> <span>this.listenTo(NoteActions.editNote, this.onEdit);
</span> <span>},
</span> <span>onCreate: function(note) {
</span> _notes<span>.push(note); //create a new note
</span>
<span>// Trigger an event once done so that our components can update. Also pass the modified list of notes.
</span> <span>this.trigger(_notes);
</span> <span>},
</span> <span>onEdit: function(note) {
</span> <span>// Update the particular note item with new text.
</span> <span>for (var i = 0; i < _notes.length; i++) {
</span> <span>if(_notes[i]._id === note._id) {
</span> _notes<span>[i].text = note.text;
</span> <span>this.trigger(_notes);
</span> <span>break;
</span> <span>}
</span> <span>}
</span> <span>},
</span>
<span>//getter for notes
</span> <span>getNotes: function() {
</span> <span>return _notes;
</span> <span>},
</span>
<span>//getter for finding a single note by id
</span> <span>getNote: function(id) {
</span> <span>for (var i = 0; i < _notes.length; i++) {
</span> <span>if(_notes[i]._id === id) {
</span> <span>return _notes[i];
</span> <span>}
</span> <span>}
</span> <span>}
</span><span>});
</span>
module<span>.exports = NoteStore; //Finally, export the Store</span>Wenn die Komponenten montiert, hören wir uns das Ereignis des Notestore -Veränderungen an. Dies wird immer dann ausgestrahlt, wenn in der Notizenliste eine Mutation vorhanden ist. Unsere Komponente hört dieses Ereignis so, dass sie die Notizen im Falle einer Änderung neu erstellen kann. Die folgende Zeile registriert einen Hörer:
<span>var React = require('react');
</span><span>var NoteList = require('./NoteList.jsx');
</span><span>var NoteStore = require('../../stores/NoteStore');
</span>
<span>var NoteListBox = React.createClass({
</span> <span>getInitialState: function() {
</span> <span>return { notes: NoteStore.getNotes() };
</span> <span>},
</span> <span>onChange: function(notes) {
</span> <span>this.setState({
</span> <span>notes: notes
</span> <span>});
</span> <span>},
</span> <span>componentDidMount: function() {
</span> <span>this.unsubscribe = NoteStore.listen(this.onChange);
</span> <span>},
</span> <span>componentWillUnmount: function() {
</span> <span>this.unsubscribe();
</span> <span>},
</span> <span>render: function() {
</span> <span>return (
</span> <span><div className="col-md-4">
</span> <span><div className="centered"><a href="" onClick={this.onAdd}>Add New</a></div>
</span> <span><NoteList ref="noteList" notes={this.state.notes} onEdit={this.props.onEdit} />
</span> <span></div>
</span> <span>);
</span> <span>}
</span><span>});
</span>
module<span>.exports = NoteListBox;</span>Wenn also eine Änderung der Veränderung der Komponente aufgerufen wird. Diese Methode empfängt eine aktualisierte Notizliste und ändert den Status.
<span>this.unsubscribe = NoteStore.listen(this.onChange);</span>
als this.state.notes wird als Requisite an den Notelist übergeben, wenn der Staat den Notelist erneut verändert.
Schließlich schreiben wir dies.
So bleibt der Notelist immer auf dem neuesten Stand, indem sie sich das Change-Ereignis des Geschäfts anhört. Lassen Sie uns nun sehen, wie eine Notiz erstellt/bearbeitet wird.
NotecrionBox:
schauen Sie sich die folgende Methode der NotecreationBox an:
grunt watch grunt nodemon
Diese Methode wird aufgerufen, wenn die Schaltfläche Speichern gespeichert wird. Es akzeptiert Notetext als seinen ersten Parameter. Wenn eine ID als zweiter Parameter übergeben wird, wissen wir, dass dies eine Bearbeitungsoperation ist und die Aktionsnotnaktionen aufrufen.Editnote (). Andernfalls generieren wir eine ID für die neue Notiz und rufen nameactions.createNote () auf. Denken Sie daran, dass unser Notestore diese Aktionen hört. Abhängig von der Aktion wird geeigneter Store -Rückruf ausgeführt. Sobald die Daten mutiert sind, löst der Store ein Änderungsereignis aus und unsere Komponenten -Notelist aktualisiert sich.
So fließt die Daten in das System und gehen anschließend in einer fluxenbasierten Anwendung aus.
Sie fragen sich vielleicht, warum ich React und Reflux auf dem Server verwendet habe. Eine der coolen Merkmale von React ist, dass die Komponenten sowohl auf dem Client als auch auf dem Server gerendert werden können. Mit dieser Technik können Sie isomorphe Apps erstellen, die auf dem Server rendern und sich auch als einseitige Apps verhalten. Dies ist zwar möglicherweise nicht für eine Notiz -App erforderlich, können dieses Setup leicht verwenden, um komplexe isomorphe Apps in Zukunft zu erstellen.
Ich ermutige Sie, den Quellcode durchzugehen und ihn weiter zu verbessern, da viel Raum für Verbesserungen vorhanden ist. Wenn Sie Fragen haben, lassen Sie es mich in Kommentaren wissen.
Danke fürs Lesen!
Das obige ist der detaillierte Inhalt vonErstellen einer Note, die App mit React und Flux nimmt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
PHP-Entwicklungstools
So öffnen Sie PHP auf einer Webseite
Was ist der Unterschied zwischen dem TCP-Protokoll und dem UDP-Protokoll?
Was ist mobiles HD?
Was ist der Grund, warum der Computerbildschirm schwarz ist, der Computer jedoch eingeschaltet ist?
Lösung zum Neustarten und Auswählen des richtigen Startgeräts
Wie hoch sind die Sternebewertungen mobiler Nutzer?
Win10 stellt eine Verbindung zum freigegebenen Drucker her
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
