antd と dva は、react で何を意味しますか?

react では、antd は Ant Design に基づく React UI コンポーネント ライブラリであり、主にエンタープライズ レベルのミドルおよびバックエンド製品の開発に使用されます。dva は redux と "redux-" に基づくデータ フロー ソリューションです。 saga" には "react-router" と fetch が組み込まれており、アプリケーション フレームワークとして理解できます。

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

react における antd と dva の意味

antd

antd は、Ant Design デザイン システムに基づく React UI コンポーネント ライブラリで、主に使用されます。研究開発用 エンタープライズレベルのミッドエンドおよびバックエンド製品。

特長

• エンタープライズレベルのミッドエンドおよびバックエンド製品のインタラクティブな言語とビジュアルスタイルから抽出されました。

• すぐに使える高品質な React コンポーネント。

• TypeScript を使用して構築され、完全な型定義ファイルが提供されます。

• #フルリンク開発および設計ツール システム

アプリケーション方法

1. インストール: (コマンド ラインに入力します)次のコマンド)

   npm install antd --save

2. 参照

グローバル ファイル内のプラグインを参照します。例:

import 'antd/dist/antd.css';

3. オンデマンドでロード (任意のプラグインをロード) in は直接必要です)

 import Button from 'antd/lib/button';
        import 'antd/lib/button/style';

dva

dva は、redux および redux-saga に基づくデータ フロー ソリューションです。開発エクスペリエンスを簡素化するために、dva には次の機能もあります。組み込みのreact-routerとfetchなので、軽量なアプリケーションフレームワークとしても理解できます。

dva は、Ant Financial によって開始されたシングルページ アプリケーション フレームワークで、redux、react-router、redux-saga の上位層のカプセル化を提供します。 redux-saga は、redux アプリケーションの非同期操作を管理するために使用されるミドルウェアです。redux-saga は、saga を作成することで、すべての非同期操作ロジックを 1 か所に収集し、集中処理します。redux-thunk ミドルウェアの置き換えに使用できます。

Thisこれは、アプリケーション ロジックが 2 つの場所に存在することを意味します。

(1) リデューサーは、アクションのステージ更新の処理を担当します。

(2) サガは、これらの複雑な要素を調整する責任を負います。非同期操作

サーガはジェネレーター関数を通じて作成されます

サーガはバックグラウンドで実行されているプロセスとみなすことができます。 sagas は開始されたアクションをリッスンし、このアクションに基づいて何を行うかを決定します (たとえば、非同期リクエストを開始するか、ストアに対する他のアクションを開始するか、他の saga を呼び出すかなど)。ジェネレーター関数が使用され、redux -saga を使用すると、同期的な方法で非同期コードを作成できます

React プロジェクトで Dva を導入します

最初に dva (現在のバージョン 2.4.1) をインストールします

npm install dva —save

公式ドキュメントを参照し、プロジェクトを dva モードに変換し、src

import dva from ‘dva’;
import createHistory from ‘history/createHashHistory’;
 
//1.Initialize
const app = dva({
history: createHistory(),
});
 
//2.Plugins
//app.use({});
 
//3.Model
//app.model(require(‘./models/app’).default);
 
//4.Router
app.router(require(‘./router’).default);
 
//5.Start
app.start(‘#root’);

の下にエントリ ファイルindex.js を追加または変更します。推奨される学習: 「

react ビデオ チュートリアル##」 #"

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