Reactにおける一方向のデータフロー

Reactを使用すると、単方向データフローという用語が使用される場合があります。どういう意味ですか?

一方向データフローはReactに固有の概念ではありませんが、JavaScript開発者としては、これを初めて耳にするかもしれません。

一般に、この概念は、データにアプリケーションの他の部分に転送する方法が1つしかないことを意味します。

Reactでは、これは次のことを意味します。

  • 状態はビューと子コンポーネントに渡されます
  • アクションはビューによってトリガーされます
  • アクションは状態を更新できます
  • 状態の変更は、ビューと子コンポーネントに渡されます

View-actions-state

ビューは、アプリケーションの状態の結果です。状態は、アクションが発生したときにのみ変更できます。アクションが発生すると、状態が更新されます。

一方向バインディングのおかげで、データは逆方向に流れることができません(たとえば、双方向バインディングで発生するように)。これにはいくつかの重要な利点があります。

  • データをより細かく制御できるため、エラーが発生しにくくなります
  • ご存知のように、デバッグは簡単です。から来ていますどこ
  • ライブラリはシステムの各部分の境界が何であるかをすでに知っているので、より効率的です

状態は常に1つのコンポーネントによって所有されます。この状態の影響を受けるデータは、その下のコンポーネント、つまりその子にのみ影響します。

コンポーネントの状態を変更しても、その親、兄弟、またはアプリケーション内の他のコンポーネントには影響しません。子だけに影響します。

これが、状態がコンポーネントツリーで頻繁に上に移動される理由であり、アクセスする必要のあるコンポーネント間で状態を共有できます。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: