創建一個使用React和Flux的Note採用應用程序

Facebook的React是一個非常不錯的庫，用於創建用戶界面。唯一的問題是React不在乎您的應用程序如何處理數據。大多數人將反應用作MV*中的V。因此，Facebook引入了一種名為Flux的模式，該模式為應用程序內的數據處理帶來了功能性的方法。本教程簡要介紹了通量模式，並展示瞭如何使用React和Flux架構創建Note應用程序。

>

鑰匙要點

Flux是Facebook介紹的模式，它為應用程序中的數據處理帶來了功能性方法，從而補充了React的用戶界面的創建。它依賴於單向數據流，包括商店和動作等關鍵組件。 >
• 教程提供了使用React，Flux和Node.js創建筆記應用程序的示例。該應用程序分為各種組件，例如NoteApp，NoteListBox，Notelist，Note，NoteCreationBox和TextArea。
>在服務器上使用React和Reflux在客戶端和服務器端呈現組件。該技術允許創建在服務器上渲染並以單頁應用程序的方式創建同構應用 在磁通架構中，應用程序的狀態存儲在商店中。發生操作時，它將數據發送給調度程序，然後將此數據發送到相關商店。該商店更新其狀態並發出更改事件，從而導致任何反應組件在偵聽商店中的更改以更新和重新渲染自己。
• >
• flux上的底漆
• 通量依賴於單向數據流。我們有兩個磁通模式中的兩個關鍵組件：

存儲：顧名思義的商店組件存儲了應用程序數據。

動作：新數據通過操作流入商店。商店收聽操作並在調用操作時執行某些任務（例如修改數據）。這使數據流程單向保持。

為了加強這個概念，讓我們以一個真實的榜樣。例如，在“筆記製作應用”中，您可以具有以下安排：
2. >一個名為Notestore的商店，該商店存儲了筆記列表。

>您可以採用稱為CreateNote的動作。每當調用操作時，商店諾斯托爾都會聆聽動作createNote並用新的註釋更新其列表。數據僅通過操作才能流入商店。

索式台球時，每當其數據更改時會觸發事件。您的React組件（例如NoteListComponent）會聆聽此事件，並更新視圖中列出的註釋列表。這就是數據流出商店的方式。

因此，數據流可以如下可視化：
2. >

>通量模式的最大優點是它使您的應用程序數據保持平整。由於只能通過動作進行突變，因此更容易理解數據變化如何影響整個應用程序。

>注意：

>如果您已經瀏覽了Facebook的通量指南，則可能已經註意到了調度員的概念。調度員是回到商店的回調註冊表。調用操作後，調度員會響應它，並將關聯的數據發送給所有註冊商店。然後，商店檢查操作類型並相應地執行任務。

>上述過程已被稱為reflux的庫大大簡化。它通過使動作可聽來消除調度員的概念。因此，在反流中，商店可以直接聽取動作並響應其調用。

完全了解通量模式，讓我們構建一個簡單的音符，以reflux，react和node.js.s.

進行應用程序。

建立開發環境

>我們將使用React和Reflux用作節點模塊，並使用瀏覽器也可以在客戶端提供它們。因此，這是我們建立環境的方式：

1. >我們將使用瀏覽器將我們的React組件，操作和存儲捆綁到客戶端.js軟件包。
>我們將使用Grunt Watch來檢測上述組件中的更改，並在每次更改發生時重新運行瀏覽。
Grunt Nodemon用於在更改任何.jsx或.js文件時重新啟動服務器，以便您不必手動執行它。
>您可以從github下載代碼，然後打開gruntfile.js來閱讀有關任務的信息。在計算機上擁有回購後，您只需運行NPM安裝即可安裝所需的節點模塊。運行以下命令並開始開發：

grunt watch
grunt nodemon

該應用程序可在https：// localhost：8000上訪問，如下所示：
在應用程序上工作
>讓我們從應用程序的各個組件開始。以下是我們可以將UI分為各種組件的方式：

>



這是每個組件的作用：

>

1. noteapp：這是由兩個子組件組成的根組件：noteListbox和notecreationbox。
2. noteListBox：具有一個單個子組件notelist。它檢索了Flux Store的筆記列表，並將其傳遞給Notelist。
notelist：負責渲染每個音符組件。將音符對像傳遞給每個音符組件。
3. >
注意：顯示單個註釋項目的詳細信息。在這種情況下，我們只顯示標題。您可以輕鬆地繼續顯示其他詳細信息，例如日期，字幕等。
notecreationbox：此組件呈現一個文本方面的組件，並將當前編輯的註釋ID傳遞給其（如果有）。
TextArea：提供一個文本方面來接受用戶輸入。將註釋文本傳遞到notecreationbox以保存。
創建動作
>讓我們使用回流來創建一些動作。如果您打開操作/noteactions.js，則可以查看如何創建動作。這是片段：

grunt watch
grunt nodemon

reflux.createactions用於創建動作。我們導出這些動作以便在我們的組件中使用它們。

>

創建商店
>我們有一個名為Notestore的單個商店，該商店維護一系列筆記。以下代碼用於創建商店（商店/notestore.js）：>

如您所見，我們在INIT方法內收聽了兩個動作，CreateNote和Editnote。我們還註冊了調用操作時執行的回調。添加/更新註釋的代碼非常簡單。我們還揭露Getters以檢索筆記列表。最後，該商店被導出，以便可以在我們的組件中使用。 創建組件

<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>

我們所有的反應組件都位於React/組件目錄中。我已經顯示了UI的整體結構。您可以查看下載的源代碼，以了解有關每個組件的更多信息。在這裡，我將向您展示關鍵的事情（即我們的組件如何調用動作並與商店互動）。
notelistbox：
此組件從諾森特獲取了筆記列表，並將其饋送到Notelist組件中，然後將筆記呈現。這是組件的外觀：

組件安裝時，我們開始收聽索引的更改事件。每當筆記列表中有突變時，這都是廣播。我們的組件會傾聽此事件，以便在任何更改的情況下重新渲染註釋。以下行註冊了一個聽眾：

>因此，只要調用組件的更改方法。此方法收到更新的註釋列表並更改狀態。

<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>

at this.state.notes被作為道具傳遞給Notelist，每當國家更改NoteList重新很多很多很多時。

<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>

>最後，我們在componentWillunMount中編寫this.unsubscribe（）以刪除偵聽器。

>因此，這就是Notelist總是通過收聽商店的變更活動來保持最新狀態的方式。現在，讓我們看看如何創建/編輯註釋。

>

notecreationbox：

可以看一下notecreationbox的以下方法：

每當單擊“保存”按鈕時，該方法都會調用。它接受noteText作為其第一個參數。如果將ID傳遞為第二個參數，我們知道這是一個編輯操作，並調用操作NoteActions.EditNote（）。 否則，我們為新註釋生成一個ID，並調用noteactions.createnote（）。請記住，我們的諾特爾（Notestore）聽這些動作。根據操作，執行了適當的存儲回調。一旦數據突變，商店就會觸發一個變更事件，而我們的組件努力會自行更新。

grunt watch
grunt nodemon

>

這是數據流入系統的方式並隨後在基於通量的應用程序中輸出。 >

為什麼在服務器上使用react
>您可能想知道為什麼我在服務器上使用了React和Replux。 React的很酷的功能之一是可以在客戶端和服務器上渲染組件。使用此技術，您可以創建在服務器上渲染並作為單頁應用程序的同構應用程序。雖然Note應用程序可能不需要這是必需的，但您可以輕鬆地使用此設置來構建複雜的同構應用程序。

>

>我鼓勵您瀏覽源代碼並進一步改進，因為有很大的改進空間。如果您有任何疑問，請在評論中告訴我。

>

感謝您的閱讀！
經常詢問有關使用React和Flux

創建筆記應用程序的問題

> Flux在用React創建筆記應用程序中的作用是什麼？它通過使用單向數據流來補充React的合併視圖組件。在創建筆記應用程序的背景下，Flux在管理數據流中起著至關重要的作用。它確保數據朝著一個方向移動，從動作到商店再到視圖。這使該應用程序更容易預測，更易於理解，因為它避免了組件之間的數據共享的複雜性以及雙向數據綁定的混淆。

>如何與Flux一起在構建筆記應用程序中與Flux一起工作？

反應和通量共同使用，通過分配職責來構建筆記應用程序。 React負責渲染視圖並響應用戶輸入，而Flux管理應用程序的數據流。當用戶與React組件進行交互（例如添加新音符）時，它會觸發操作。此操作通過調度程序更新商店（應用程序的中央數據）。然後，商店發出更改事件，導致React組件在必要時進行更新和重新渲染。

>通量體系結構的關鍵組成部分是什麼？

磁通結構由四個主要組件組成：操作，調度程序，商店和視圖（React組件）。操作是將數據從應用程序發送到調度程序的信息的有效載荷。調度程序是一種管理應用程序中所有數據流的中央集線器。商店包含應用程序狀態和邏輯，並且由調度員更新。最後，視圖（React組件）在發生這些更改時聆聽商店的更改並重新渲染自己。

>

>如何使用Flux使用Flux？在Flux中，您的應用程序狀態通常存儲在商店中。發生操作時（例如添加新註釋），它將數據發送給調度程序。然後，調度員將此數據發送到相關商店。該商店更新其狀態並發出更改事件。任何正在偵聽商店中更改的反應組件都會自行更新和重新渲染，以反映應用程序的新狀態。

flux如何幫助維持筆記應用應用程序的可擴展性？

通量體系結構有助於保持筆記應用程序的可擴展性。這使應用程序隨著複雜性的增長而易於理解和修改。單向數據流可確保應用程序的一個部分的變化不會出乎意料地影響其他部分，從而降低了錯誤的可能性並使應用程序更易於測試和調試。

>我如何處理我的用戶交互使用React和Flux？

>使用React和Flux構建的筆記應用程序中的用戶互動通常通過操作來處理。當用戶與React組件進行交互時（例如，單擊按鈕添加新註釋），它會觸發操作。此操作將數據發送給調度員，該調度員更新了相關商店。然後，商店發出更改事件，導致任何聆聽的反應組件更新和重新渲染。

>如何測試使用React和Flux構建的筆記應用程序？ - 可以使用各種測試庫和框架來完成用React和Flux構建的應用應用程序。對於單位測試反應組件，可以使用開玩笑或酶等文庫。為了測試通量操作和商店，您可以將Jest與Redux Mock商店或Flux Mock商店等庫一起使用。可以使用柏樹或木偶等工具進行端到端的測試。

>如何調試使用React和Flux構建的筆記應用應用程序？

>在構建筆記應用程序時，我可以使用其他庫或框架，並使用React和Flux？

>是的，您可以在構建筆記應用應用程序時使用其他庫或框架。例如，您可能會使用諸如React路由器之類的路由庫進行導航，諸如JEST的測試庫進行測試，或者像材料UI這樣的UI庫來造型。庫或框架的選擇將取決於您的特定需求和偏好。

>

如何優化使用React和Flux構建的筆記應用程序的性能？使用React和Flux構建的注意應用程序可能涉及各種策略。一種常見的策略是通過仔細管理狀態和道具，並在適當的情況下使用React的Purecomponent或shopscomponentupate確保組件僅在必要時重新渲染。其他策略可能包括通過使用代碼分組來優化應用程序的初始加載時間，或通過使用諸如Relay或Apollo之類的庫來優化數據獲取。

>

以上是創建一個使用React和Flux的Note採用應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！