ReactとFluxを使用してアプリを取得するメモを作成します

Facebookによると、

Reactは、ユーザーインターフェイスを作成するための非常に素晴らしいライブラリです。唯一の問題は、Reactがアプリケーションがデータをどのように処理するかを気にしないことです。ほとんどの人は、MV*のVとしてReactを使用します。そこで、FacebookはFluxというパターンを導入しました。これは、アプリ内のデータ処理に機能的なアプローチをもたらします。このチュートリアルでは、フラックスパターンに関する簡単な紹介と、ReactおよびFluxアーキテクチャを使用してアプリを使用してメモを作成する方法を示しています。

キーテイクアウト

フラックスは、Facebookによって導入されたパターンであり、アプリでのデータ処理に対する機能的なアプローチをもたらし、Reactのユーザーインターフェイスの作成を補完します。店舗やアクションなどの主要なコンポーネントを介した単方向データフローに依存しています。
• このチュートリアルは、React、Flux、node.jsを使用してメモを取るアプリを作成する例を提供します。このアプリは、NoteApp、NoteListbox、NoteList、Note、NoteCreationBox、Textareaなどのさまざまなコンポーネントに分割されています。
reactと逆流は、クライアント側とサーバー側の両方のコンポーネントをレンダリングするためにサーバーで使用されます。この手法により、サーバー上でレンダリングされ、単一ページアプリとして動作する同型アプリを作成できます。
• フラックスアーキテクチャでは、アプリケーションの状態は店舗に保存されています。アクションが発生すると、データをディスパッチャーに送信し、このデータを関連するストアに送信します。ストアは状態を更新し、変更イベントを放出し、ストアの変更を聞いている反応コンポーネントが自分自身を更新および再レンダリングすることを引き起こします。
• フラックスのプライマー
• フラックスは一方向のデータフローに依存しています。フラックスパターンには2つの重要なコンポーネントがあります。

ストア：名前が示すように、ストアコンポーネントはアプリケーションデータを保存します。

アクション：アクションを通じて新しいデータがストアに流れます。ストアはアクションを聴き、アクションが呼び出されたときにいくつかのタスク（例：データを変更する）を実行します。これにより、データフローが一方向に保持されます。

概念を強化するために、現実の世界の例を取りましょう。たとえば、メモを作成するアプリでは、次の配置を作成できます。
ノートのリストを保存するNotestoreと呼ばれるストア。
CreateNoteというアクションを持つことができます。ストアNotestoreは、アクションCreateNoteに耳を傾け、アクションが呼び出されるたびに新しいメモでリストを更新します。データはアクションを通じてのみストアに流れます。

Notestoreは、データが変更されるたびにイベントをトリガーします。 NotelistComponentによると、Reactコンポーネントはこのイベントに耳を傾け、ビューに表示されるメモのリストを更新します。これが、データがストアから流れる方法です。

1. したがって、データフローは次のように視覚化できます。

2. フラックスパターンの最大の利点は、アプリケーションデータをフラットに保つことです。突然変異はアクションを通じてのみ行うことができるため、データの変更がアプリケーション全体にどのように影響するかを理解するのは簡単です。

   注：

   Facebookのフラックスガイドを使用した場合、ディスパッチャーの概念に気付いたかもしれません。ディスパッチャーは、店舗へのコールバックのレジストリです。アクションが呼び出されると、ディスパッチャーはそれに応答し、関連するデータをすべての登録店に送信します。その後、ストアはアクションタイプを確認し、それに応じてタスクを実行します。

   上記のプロセスは、逆流と呼ばれるライブラリによって大幅に簡素化されています。アクションを聞くことができるようにすることにより、ディスパッチャの概念を削除します。したがって、逆流の店では、アクションを直接聴き、呼び出しに応答できます。

   フラックスパターンを完全に理解するには、逆流、反応、およびnode.js.

   を使用してアプリを撮影する簡単なメモを作成しましょう。 開発環境のセットアップ

   Reactと逆流をノードモジュールとして使用し、Browserifyを使用してクライアント側でも使用できるようにします。したがって、環境のセットアップ方法は次のとおりです

   Browserifyを使用して、Reactコンポーネント、アクション、ストアをクライアント側の.JSパッケージにバンドルアップします。

   Grunt Watchを使用して、上記のコンポーネントの変更を検出し、変更が発生するたびにBrowserifyを再実行します。
   1. Grunt Nodemonは、.jsxまたは.jsファイルが変更されるたびにサーバーを再起動するために使用して、手動で行う必要がないようにします。
   githubからコードをダウンロードして、gruntfile.jsを開いてタスクについて読むことができます。マシンにリポジトリを置いたら、NPMインストールを実行して、必要なノードモジュールをインストールできます。次のコマンドを実行し、開発を開始します
   アプリにはhttps：// localhost：8000でアクセスでき、次のように機能します。

   grunt watch
   grunt nodemon

   アプリで作業しています

   アプリのさまざまなコンポーネントから始めましょう。 UIをさまざまなコンポーネントに分割する方法は次のとおりです。

   ここに、各コンポーネントが行うことは次のとおりです

   1. noteapp：これは、2つの子コンポーネントで構成されるルートコンポーネントです。NoteListboxとnoteCreationBox。
   2. noteListbox：単一の子コンポーネントノートリストがあります。 Fluxストアからメモのリストを取得し、それらをノートリストに渡します。
   Notelist：各ノートコンポーネントのレンダリングを担当します。 Noteオブジェクトを各ノートコンポーネントに渡します。
   注：単一のメモ項目の詳細を表示します。この場合、タイトルを表示するだけです。簡単に先に進んで、日付、字幕などの他の詳細を表示できます。
   4. NoteCreationBox：このコンポーネントは、テキストアレアコンポーネントをレンダリングし、現在編集されているメモIDを渡します。
   5. Textarea：ユーザーの入力を受け入れるためのTextareaを提供します。保存するためにメモテキストをNoteCreationBoxに渡します
   6. アクションの作成

   逆流を使用して、いくつかのアクションを作成しましょう。アクション/noteactions.jsを開くと、アクションがどのように作成されるかを確認できます。こちらがスニペットです：

   refrux.createactionsは、アクションを作成するために使用されます。これらのアクションをコンポーネントで使用するためにエクスポートします。

   ストアの作成

   grunt watch
   grunt nodemon

   ノートストアと呼ばれる単一のストアがあり、一連のメモを維持しています。次のコードは、ストアの作成に使用されます（store/notestore.js）：

   あなたが見るように、私たちはinitメソッド内で、createNoteと編集の2つのアクションを聴きます。また、アクションが呼び出されたときに実行するためにコールバックを登録します。メモを追加/更新するためのコードは非常に簡単です。また、ゲッターを公開して、メモのリストを取得します。最後に、店舗はコンポーネントで使用できるようにエクスポートされています。

   コンポーネントの作成
   すべてのReactコンポーネントは、React/コンポーネントディレクトリにあります。私はすでにUIの全体的な構造を示しています。ダウンロードしたソースコードをチェックして、各コンポーネントについて詳しく知ることができます。ここで重要なことを紹介します（つまり、コンポーネントがアクションを呼び出してストアと対話する方法）。

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

   noteListbox：
   このコンポーネントは、Notestoreからノートのリストを取得し、ノートリストコンポーネントに送信し、メモをレンダリングします。コンポーネントがどのように見えるかは次のとおりです
   コンポーネントがマウントされると、Notestoreの変更イベントを聴き始めます。これは、メモリストに突然変異がある場合はいつでも放送されます。私たちのコンポーネントは、このイベントに耳を傾け、変更があればメモを再レンダリングできるようにします。次の行でリスナーが登録されています：

   したがって、コンポーネントの変更メソッドが変更されるたびに呼び出されます。この方法は、更新されたメモリストを受け取り、状態を変更します。

   this.state.notesはノートリストへの小道具として渡されます。

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

   最後に、componentwillunmount内にunsubscribe（）を書き込み、リスナーを削除します。

   だから、これはノーチリストが常にStoreの変更イベントを聞くことで最新の状態を維持する方法です。次に、メモがどのように作成/編集されているかを見てみましょう

   notecreationbox：
   次のNoteCreationBoxの方法をご覧ください：

   grunt watch
   grunt nodemon

   このメソッドは、[保存]ボタンがクリックされるたびに呼び出されます。 NoteTextを最初のパラメーターとして受け入れます。 IDが2番目のパラメーターとして渡された場合、これは編集操作であることがわかり、アクションnotions.editnote（）を呼び出します。 それ以外の場合は、新しいメモのIDを生成し、noteactions.createNote（）を呼び出します。これらのアクションに耳を傾けているNotestoreを覚えておいてください。アクションに応じて、適切なストアコールバックが実行されます。データが変異すると、ストアは変更イベントをトリガーし、コンポーネントノートリスト自体が更新されます。

   これは、データがシステムに流れ込み、その後フラックスベースのアプリケーションで外出する方法です。

   なぜサーバーでReactを使用するのか
   なぜ私がサーバーにReactと逆流を使用したのか疑問に思うかもしれません。 Reactのクールな機能の1つは、コンポーネントをクライアントとサーバーの両方でレンダリングできることです。この手法を使用して、サーバー上でレンダリングされ、単一ページアプリとして動作する同型アプリを作成できます。これはメモアプリには必要ないかもしれませんが、このセットアップを使用して、将来複雑な同型アプリを構築することができます。

   改善の余地がたくさんあるので、ソースコードを調べてさらに改善することをお勧めします。ご質問がある場合は、コメントでお知らせください。

   読んでくれてありがとう！

   反応とフラックスを備えたメモを取るアプリの作成に関するよくある質問

   Reactを使用してノートテイキングアプリを作成する際のフラックスの役割は何ですか？

   フラックスは、FacebookがReactで内部的に使用するデザインパターンです。一方向のデータフローを利用することにより、Reactの構成可能なビューコンポーネントを補完します。ノートテイキングアプリを作成するというコンテキストでは、Fluxはデータフローの管理に重要な役割を果たします。アクションからストア、そしてビューまで、データが単一の方向に移動することを保証します。これにより、コンポーネント間のデータ共有の複雑さと双方向データバインディングの混乱を回避するため、アプリのより予測可能で理解しやすくなります。 ？

   反応とフラックスは、責任を分割することにより、メモを取るアプリを構築するために連携します。 Reactは、ビューのレンダリングとユーザー入力への応答に責任がありますが、Fluxはアプリケーションのデータフローを管理します。ユーザーがReactコンポーネントと対話すると（新しいメモの追加など）、アクションがトリガーされます。このアクションは、ディスパッチャーを介してストア（アプリの中央データ）を更新します。その後、ストアは変更イベントを放出し、必要に応じてReactコンポーネントを更新および再レンダリングします。フラックスアーキテクチャの重要なコンポーネントは何ですか？

   フラックスアーキテクチャは、アクション、ディスパッチャー、ストア、ビュー（反応コンポーネント）の4つの主要なコンポーネントで構成されています。アクションは、アプリケーションからディスパッチャーにデータを送信する情報のペイロードです。ディスパッチャーは、アプリケーション内のすべてのデータフローを管理する一種の中央ハブです。店舗にはアプリケーションの状態とロジックが含まれており、ディスパッチャーによって更新されます。最後に、ビュー（Reactコンポーネント）が店舗の変更を聞き、それらの変更が発生したときに自分自身を再レンダリングします。フラックスでは、アプリケーションの状態は通常、店舗に保存されます。アクションが発生した場合（新しいメモの追加など）、データをディスパッチャーに送信します。ディスパッチャーは、このデータを関連するストアに送信します。ストアは州を更新し、変更イベントを発します。ストアの変更を聞いている反応コンポーネントは、アプリケーションの新しい状態を反映して、自らを更新および再レンダリングします。 🎜>

   フラックスアーキテクチャは、明確で予測可能なデータフローを提供することにより、ノートテイキングアプリのスケーラビリティを維持するのに役立ちます。これにより、アプリは複雑さで成長するにつれて、アプリを理解し、変更しやすくなります。一方向のデータフローにより、アプリの一部の変更が他の部分に予期せず影響を与えないようにし、バグの可能性を減らし、アプリのテストとデバッグを容易にすることができます。 ReactとFluxを使用したノートテイキングアプリ？

   ReactおよびFluxで構築されたノートテーキングアプリでのユーザーインタラクションは、通常、アクションを通じて処理されます。ユーザーがReactコンポーネントと対話すると（ボタンをクリックして新しいメモを追加するなど）、アクションがトリガーされます。このアクションは、データをディスパッチャーに送信し、関連するストアを更新します。その後、ストアは変更イベントを放出し、リスニングリアクションコンポーネントが更新および再レンダリングされます。 -ReactおよびFluxで構築されたテイキングアプリは、さまざまなテストライブラリとフレームワークを使用して実行できます。ユニットテストの反応コンポーネントには、Jestや酵素などのライブラリを使用できます。フラックスのアクションとストアをテストするには、Jestを使用して、Redux-Mockストアやフラックスモックストアなどのライブラリを使用できます。サイプレスや操り人形師などのツールを使用してエンドツーエンドのテストを行うことができます。

   反応とフラックスで構築されたノートテイキングアプリをデバッグするにはどうすればよいですか？反応とフラックスを使用して、さまざまなツールを使用して行うことができます。 ChromeおよびFirefoxのReact Developer Tools Extensionを使用すると、Reactコンポーネントの階層、小道具、および状態を調べることができます。フラックスをデバッグするには、アクションを記載してコンソールの変更を記入することも、フラックスの実装としてReduxを使用している場合はRedux DevToolsなどのツールを使用できます。

   ノートテイキングアプリを構築するときに、ReactとFluxを使用して他のライブラリまたはフレームワークを使用できますか？

   はい。たとえば、NavigationにReact Routerなどのルーティングライブラリ、テスト用のJestなどのテストライブラリ、またはアプリをスタイリングするためのMaterial-UIのようなUIライブラリを使用する場合があります。ライブラリまたはフレームワークの選択は、特定のニーズと好みに依存します。

   反応とフラックスで構築されたノートテイキングアプリのパフォーマンスを最適化するにはどうすればよいですか？ ReactとFluxで構築されたメモ削減アプリには、さまざまな戦略が含まれます。一般的な戦略の1つは、状態と小道具を慎重に管理し、ReactのPurecomponentを使用して、または必要に応じてReactのPurecomponentを使用することにより、必要な場合にのみ再レンダリングすることを保証することです。その他の戦略には、コード分割によるアプリの初期負荷時間の最適化、またはリレーやアポロなどのライブラリを使用してデータフェッチを最適化することが含まれます。

以上がReactとFluxを使用してアプリを取得するメモを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。