反応におけるフラックスとは何を意味しますか？-フロントエンドQ&A-php.cn

React では、flux はパブリック状態管理ソリューションであり、クライアント側 Web アプリケーションのアプリケーションアーキテクチャを構築し、データの一方向フローの形式でパブリック状態を管理するために使用されます。

反応におけるフラックスとは何を意味しますか？

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

flux とは

flux は、React の vuex に似たパブリック状態管理ソリューションであり、Facebook によって公式に使用されていますアプリケーションアーキテクチャを構築しますクライアント Web アプリケーションの情報を取得し、データの 一方向フロー を使用してパブリックステータスを管理します。

これは正式なフレームワークというよりパターンに近いもので、開発者は新しいコードをあまり必要とせずにすぐに Flux を使い始めることができます。

cnpm i flux -S を使用してインストールします。

フラックスの組成

View: レイヤーの表示
アクション: ビューによって送信されるメッセージ
Dispatcher: アクションを受信し、コールバック関数を実行するために使用されるディスパッチャー
Store: データ層、ストレージ状態、変更が発生すると、

反応におけるフラックスとは何を意味しますか？ flux のワークフロー

Flux の最大の特徴は、データの「一方通行」です。

ユーザーはビューにアクセスします
ユーザーのアクションの問題を表示します
ディスパッチャはアクションを受け取り、ストアが実行するリクエストを受け取ります対応するアップデート
ストアが更新された後、「変更」イベントが発行されます
表示「変更」イベントを受信すると、ページは次のようになります。 updated

上記の処理では、データは常に「一方向」に流れ、隣接する部分にデータの「双方向」の流れは発生しません。これにより、プロセスが明確になります。

これを読んだ後、あなたは混乱するかもしれません、OK、これは正常です。次に各ステップについて詳しく説明していきます。

表示 (パート 1)

デモホームページ

index.jsx を開いてください。コンポーネントが 1 つだけ読み込まれていることがわかります。

// index.jsx
var React = require(&#39;react&#39;);
var ReactDOM = require(&#39;react-dom&#39;);
var MyButtonController = require(&#39;./components/MyButtonController&#39;);

ReactDOM.render(
  <MyButtonController/>,
  document.querySelector(&#39;#example&#39;)
);

ログイン後にコピー

上記のコードでは、コンポーネントの名前が

MyButton ではなく MyButtonController であることにお気付きかもしれません。何故ですか？

ここでは、React のコントローラービューモードを使用します。「コントローラービュー」コンポーネントは、状態を保存し、それを子コンポーネントに転送するためにのみ使用されます。

MyButtonController のソースコードは非常にシンプルです。

// components/MyButtonController.jsx
var React = require(&#39;react&#39;);
var ButtonActions = require(&#39;../actions/ButtonActions&#39;);
var MyButton = require(&#39;./MyButton&#39;);

var MyButtonController = React.createClass({
  createNewItem: function (event) {
    ButtonActions.addNewItem(&#39;new item&#39;);
  },

  render: function() {
    return <MyButton
      onClick={this.createNewItem}
    />;
  }
});

module.exports = MyButtonController;

ログイン後にコピー

上記のコードでは、

MyButtonController がパラメータをサブコンポーネント MyButton に渡します。後者のソースコードはさらに単純です。

// components/MyButton.jsx
var React = require(&#39;react&#39;);

var MyButton = function(props) {
  return <div>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

ログイン後にコピー

上記のコードでは、

MyButton が純粋なコンポーネント (つまり、状態が含まれていない) であることがわかり、テストと再利用が容易になります。これが「コントロールビュー」モードの最大のメリットです。

MyButtonロジックは 1 つだけです。つまり、ユーザーがクリックすると、this.createNewItem メソッドが呼び出され、アクションがディスパッチャーに送信されます。

// components/MyButtonController.jsx

  // ...
  createNewItem: function (event) {
    ButtonActions.addNewItem(&#39;new item&#39;);
  }

ログイン後にコピー

上記のコードでは、

createNewItem メソッドを呼び出すと、addNewItem という名前のアクションがトリガーされます。

Action

各アクションは、

actionType 属性 (アクションのタイプを記述する) とその他の属性 (データを渡すために使用される) を含むオブジェクトです。

このデモでは、

ButtonActions オブジェクトを使用してすべてのアクションを保存します。

// actions/ButtonActions.js
var AppDispatcher = require(&#39;../dispatcher/AppDispatcher&#39;);

var ButtonActions = {
  addNewItem: function (text) {
    AppDispatcher.dispatch({
      actionType: &#39;ADD_NEW_ITEM&#39;,
      text: text
    });
  },
};

ログイン後にコピー

上記のコードでは、

ButtonActions.addNewItem メソッドは AppDispatcher を使用してアクション ADD_NEW_ITEM をストアにディスパッチします。

Dispatcher

Dispatcher の機能は、アクションをストアにディスパッチすることです。これは、View と Store の間のアクションの正しい配信ルートを確立する役割を担うルーターと考えることができます。 Dispatcher は 1 つだけ存在でき、グローバルであることに注意してください。

Facebook の公式 Dispatcher 実装はクラスを出力します。Dispatcher インスタンスを生成するには、

AppDispatcher.js を記述する必要があります。

// dispatcher/AppDispatcher.js
var Dispatcher = require(&#39;flux&#39;).Dispatcher;
module.exports = new Dispatcher();

ログイン後にコピー

AppDispatcher.register() メソッドは、さまざまなアクションコールバック関数を登録するために使用されます。

// dispatcher/AppDispatcher.js
var ListStore = require(&#39;../stores/ListStore&#39;);

AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case &#39;ADD_NEW_ITEM&#39;:
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

ログイン後にコピー

上記のコードでは、Dispatcher は

ADD_NEW_ITEM アクションを受け取り、コールバック関数を実行して ListStore を操作します。

Dispatcher はアクションをディスパッチするためにのみ使用され、他のロジックを含めるべきではないことに注意してください。

Store

Store はアプリケーション全体の状態を保存します。その役割は、MVC アーキテクチャにおけるモデルに少し似ています。

デモには、すべてのデータが保存される

ListStore があります。

// stores/ListStore.js
var ListStore = {
  items: [],

  getAll: function() {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit(&#39;change&#39;);
  }
};

module.exports = ListStore;

ログイン後にコピー

上記のコードでは、

ListStore.items は項目の保存に使用され、ListStore.getAll() はすべての項目の読み取りに使用されます (ListStore)。 EmitChange( )「変更」イベントを発行するために使用されます。

ストアは変更後に「変更」イベントをビューに送信する必要があるため、イベントインターフェイスを実装する必要があります。

// stores/ListStore.js
var EventEmitter = require(&#39;events&#39;).EventEmitter;
var assign = require(&#39;object-assign&#39;);

var ListStore = assign({}, EventEmitter.prototype, {
  items: [],

  getAll: function () {
    return this.items;
  },

  addNewItemHandler: function (text) {
    this.items.push(text);
  },

  emitChange: function () {
    this.emit(&#39;change&#39;);
  },

  addChangeListener: function(callback) {
    this.on(&#39;change&#39;, callback);
  },

  removeChangeListener: function(callback) {
    this.removeListener(&#39;change&#39;, callback);
  }
});

ログイン後にコピー

上面代码中，ListStore继承了EventEmitter.prototype，因此就能使用ListStore.on()和ListStore.emit()，来监听和触发事件了。

Store 更新后（this.addNewItemHandler()）发出事件（this.emitChange()），表明状态已经改变。 View 监听到这个事件，就可以查询新的状态，更新页面了。

View （第二部分）

现在，我们再回过头来修改 View ，让它监听 Store 的 change 事件。

// components/MyButtonController.jsx
var React = require(&#39;react&#39;);
var ListStore = require(&#39;../stores/ListStore&#39;);
var ButtonActions = require(&#39;../actions/ButtonActions&#39;);
var MyButton = require(&#39;./MyButton&#39;);

var MyButtonController = React.createClass({
  getInitialState: function () {
    return {
      items: ListStore.getAll()
    };
  },

  componentDidMount: function() {
    ListStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    ListStore.removeChangeListener(this._onChange);
  },

  _onChange: function () {
    this.setState({
      items: ListStore.getAll()
    });
  },

  createNewItem: function (event) {
    ButtonActions.addNewItem(&#39;new item&#39;);
  },

  render: function() {
    return <MyButton
      items={this.state.items}
      onClick={this.createNewItem}
    />;
  }
});

ログイン後にコピー

上面代码中，你可以看到当MyButtonController 发现 Store 发出 change 事件，就会调用 this._onChange 更新组件状态，从而触发重新渲染。

// components/MyButton.jsx
var React = require(&#39;react&#39;);

var MyButton = function(props) {
  var items = props.items;
  var itemHtml = items.map(function (listItem, i) {
    return <li key={i}>{listItem}</li>;
  });

  return <div>
    <ul>{itemHtml}</ul>
    <button onClick={props.onClick}>New Item</button>
  </div>;
};

module.exports = MyButton;

ログイン後にコピー

推荐学习：《react视频教程》

以上が反応におけるフラックスとは何を意味しますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。