reduxとreactの違いは何ですか

redux と React の違いは次のとおりです: 1. redux は JavaScript 状態コンテナですが、react はユーザー インターフェイスを構築するために Facebook によって起動された JavaScript ライブラリです; 2. redux は主に状態管理を提供しますが、react は主に For を使用しますUIの構築など。

このチュートリアルの動作環境: Windows7 システム、React17 バージョン、DELL G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

推奨事項: 「JavaScript 基本チュートリアル」

相違点

redux

redux は、主に状態管理を提供する JavaScript 状態コンテナです。サーバー、クライアント、ネイティブ アプリケーションで実行できます。 React のサポートに加えて、他の UI フレームワークもサポートしており、サイズはわずか 2kb と小さいです。 React で使用する場合は、react-redux プラグインを使用して開発エクスペリエンスをさらに強化できます。

このコンテナ内のデータを変更するには、対応する API を呼び出すか、対応するメカニズムを使用します。他のコンポーネントは、コンテナから新しいデータをアクティブに再取得することで再レンダリングできます。

さらに、このコンテナはパブリッシュおよびサブスクライブのメカニズムもサポートする必要があります。つまり、特定のデータが変更されると、そのデータを扱うコンポーネントに即座に通知されます。

react

react は、ユーザー インターフェイスを構築するために Facebook によって開始された JavaScript ライブラリです。 React は主に UI の構築に使用されますが、React を MVC の V (ビュー) と考える人が多いと思います。 React は高いパフォーマンスと非常にシンプルなコードロジックを備えているため、ますます多くの人が注目し、使用し始めています。

React は、HTML にレンダリングされたデータのビューを提供するオープン ソースの JavaScript ライブラリです。 React ビューは通常、カスタム HTML タグで指定された他のコンポーネントを含むコンポーネントを使用してレンダリングされます。 React は、子コンポーネントが外部コンポーネントに直接影響を与えないモデル、データ変更時の HTML ドキュメントの効率的な更新、最新のシングルページ アプリケーションにおけるコンポーネント間の明確な分離をプログラマーに提供します。

自分の考えを使って React と Redux を理解する方法を学びましょう。他の人が名詞について説明しているのをただ聞くだけではなく、理解するのは非常に難しいのです。

ニーズから始めて、React を使用するために何が必要かを確認します:

1. React には props と state があります: props は親によって配布されるプロパティを意味し、state は意味を意味しますコンポーネントの内部状態はそれ自体で管理できますが、React 全体としてデータを上向きに追跡する機能はありません。つまり、データは一方向に下向きにのみ分散されるか、内部的にそれ自体で消化されます。

これを理解することは、React と Redux を理解するための前提条件です。

2. 一般的に構築された React コンポーネントには、それ自体で適切に動作する完全なアプリケーションが内部に含まれている場合があり、API としてプロパティを通じて制御できます。しかし、多くの場合、React では 2 つのコンポーネントが相互に通信し、互いのデータを使用することを許可できないことがわかります。

現時点で、DOM (つまり React システム内) を介した通信を行わない唯一の解決策は、状態を改善し、その状態を共有の親コンポーネントに入れて管理し、それを子に配布することです。コンポーネントを小道具として使用します。

3. 子コンポーネントが親コンポーネントの状態を変更する唯一の方法は、onClick を通じて親コンポーネントによって宣言されたコールバックをトリガーすることです。つまり、親コンポーネントは関数またはメソッドを事前に次のように宣言します。状態がどのように変化するかを記述するためのコントラクトを属性として子コンポーネントにも渡します。

データは常に上から下へ一方向に分散されますが、概念的にはサブコンポーネントのコールバックのみがトップの状態に戻ってデータに影響を与えるというパターンが現れます。このようにして、国家はある程度まで対応します。

4. 考えられるすべての拡張問題に対処するために考えられる最も簡単な方法は、すべての状態をすべてのコンポーネントの最上位に置き、それをすべてのコンポーネントに分散することです。

5. 状態管理を改善するには、より専門的なトップレベルの状態としてすべての React アプリケーションに配布するためのライブラリが必要です。これが Redux です。戻って、上記の構造を再現するための要件を見てみましょう:

コールバック通知状態 (コールバック パラメーターに相当) が必要 -> アクション

コールバックに従って処理される必要があります(親メソッドと同等) ->reducer

状態が必要 (全体の状態に等しい) ->store

Redux の要素は次の 3 つだけです:

action は純粋に宣言型です。データ構造はイベントのすべての要素のみを提供し、ロジックは提供しません。

Reducer はマッチング関数であり、アクションの送信はグローバルです。すべての Reducer は、それが自分自身に関連しているかどうかをキャプチャして照合できます。関連している場合は、アクション内の要素が取り除かれます。論理的な処理が行われ、ストア内の要素が変更されますが、状態が関連しない場合は、状態は処理されず、そのまま返されます。

Store は状態の保存を担当し、react API やパブリッシュ アクションによってコールバックできます。

もちろん、2 つのライブラリは通常、直接使用されません。react- と呼ばれるバインディングもあります。 redux はプロバイダーと接続を提供します。実際、多くの人が redux がここで行き詰まっていることを理解しています。

プロバイダーは、トップレベル アプリの配布ポイントとして使用できる共通コンポーネントであり、store 属性のみが必要です。コンポーネントがどこにあるか、ネストされているレベルの数に関係なく、接続されているすべてのコンポーネントに状態を配布します。

Connect が本当のポイントです。これは厳選された関数であり、最初に 2 つのパラメーター (データ バインディングの mapStateToProps とイベント バインディングの MapDispatchToProps) を受け入れ、次に 1 つのパラメーター (バインドされるコンポーネント自体) を受け取ります。

mapStateToProps: Redux システムが構築されると、自動的に初期化されますが、React コンポーネントはその存在を知らないため、必要な Redux 状態を整理する必要があるため、関数とそのパラメーターをバインドする必要がありますは状態であり、単に関心のあるいくつかの値を返します。

mapDispatchToProps: 宣言されたアクションはコールバックとして機能し、コンポーネントに注入することもできます。これはこの関数を介して行われます。そのパラメーターはディスパッチです。すべてのアクションとパラメーターのディスパッチは、redux 補助メソッド bindingActionCreator を通じてバインドされます。手動でディスパッチせずに、コンポーネント内の属性として関数として単純に使用できます。このmapDispatchToPropsはオプションであり、このパラメータを渡さない場合、reduxは単純に属性としてdispatchをコンポーネントに挿入し、store.dispatchとして手動で使用できます。

これも治療が必要な理由です。

上記のプロセスが完了すると、Redux と React が動作する準備が整います。

簡単に言えば:

1. 最上位の配布状態で、React コンポーネントが受動的にレンダリングできるようにします。

2. イベントをリッスンすると、イベントはすべての状態の最上位に戻って状態に影響を与える権利を持ちます。

要約:

React には状態を管理するマネージャーが必要ですが、Redux はこの役割として機能し、トップレベルの状態を配布し、React コンポーネントのレンダリングを変更します。

以上がreduxとreactの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。