著者| Yangruoゆいます
ソース| CSDNブログ、Zebian | yugao
ヘッドフィギュア|視覚的に中国から支払わダウンロード
出品 | CSDN（ID:CSDNnews）
人気がフロントエンドを反応させるのが基本的な知識の多くのメーカーに反応、さらには本番環境でのアプリケーションのための成熟したフレームワークを持っています。今日は、問題がMirrorXを書くことです探る先人のコンポーネントを見て、高度しばしば出会い反応し、それは周りの周りの周りに混乱し、書きました。実際のケース：可能なシンプルな質量の参加、フロントエンドの開発エンジニアはコードで少なくとも4-5時間を過ごすことになります変更します。この記事だから私はすぐにRESTfulなリクエストが届くのMirrorX処理され、部品組立の再レンダリングを刺激する方法を理解するために、高度なフロントエンドエンジニアであることのプロセスを支援するために行います。この記事メーカーは、フロントエンドの開発を持っている必要があります。
読者のために：基本的なプログラマ、UF UCFの開発者、アリゴールドのドレスAntdの開発と反応します。
Qコンセプト
1. MirrorXは何ですか？
MirrorX Reduxのステートマシンは、パッケージに基づいています。例えば、我々は、商品のインターフェイスを読み取るために必要な背景の仮定の実際の使用は、データへのインタフェースは、（例えば、フロントエンド割引割引額を算出するために）、いくつかの処理を行うために戻され、その後、処理されたデータが画面に表示されています。あなたは、コード、クラスコンポーネントの多くを使用する必要があり、その中に置かれるべきだと思いますか？
フレームワークがある場合は、あなただけは解決することができる1行のコードでコンポーネントを調整する必要があり、非常に良いではありませんか？MirrorXはそれを行うために使用されます。
2、どのように1行解決するために行うことができますか？
オブジェクト指向プログラミングを学習し、カプセル化は、コードがより簡潔制御層を形成することができることを知っているべきです。しかし、あなたがそのことに対処する場合で反応することだけでも、ほとんどのプログラマが不快で反応して、（例えば、VIPレベルは番号でいる現在のユーザーとして）出入りの状況を知っている必要があり、状態制御や小道具の両方を必要とし、言いました現在のユーザ情報UserView成分、現在GoodsView UserViewコンポーネントへアクセスなしのコンポーネント。そのため、コンポーネント間の統一場所に障害物、情報の保存、このメカニズム良いパッケージがあり、あなたが解決した行を達成することができます。
3.具体的にどのような仕組み？
Reduxのは、その後、検索MirroXは、特定のメカニズムを知ることができます見てReduxの程度多くのオンラインの記事があります。簡単に言えば、それは、システム状態の倉庫の数を持って、我々はコンテキスト変数は、ユーザ情報、製品情報など、さまざまな倉庫、に分類されて置くことができる、であり、このような製品の情報を読み取るよう、すべての時間を達成するための行動に呼び出すために、商品の数を変更します。あなたがサービスを呼び出す場合、それは一般的にサーバの対話の必要性の関数であり、アクションが直接サービスを起動する必要がなく、倉庫値のステータスを変更し、フロントデスクはアイテムの数を変更する場合は、サービスを呼び出すかどうかを選択することができます。
MirrorXを持つ関数を完了する方法
ここでは例えば商品リストをリードバックする要求が
1、環境の準備
まずことを確認してください、あなたはNPM I、反応し、axiosによってmirrorxをインストールしました。この記事は、雑誌をインストールする方法についてのベストプラクティスであるため。
2、シンプルなサービス（Service）を書きます
（実際には多くのコメント、ない数行のコード）service.jsファイルを書きます
1import request from "axios";
2const URL={
3 GET_GOODS:"api/template/GetGoods" // 声明要访问的后台接口地址
4}
5// 暴露出一个名为GetGoodsApi的函数，入参params是Object类型，代表提交给后台的参数列表
6// 这个函数会返回一个Promise对象
7export const GetGoodsApi = (params) => {
8 return request(URL.GET_GOODS, {method: "post",params})
9}
10// 你还可以暴露出其他函数，一个Service可以export const多个函数
11// export const GetMember = (params) => {
12// return request(URL.GET_MEMBER, {method: "post",params})
13//}
単純なモデル層（モデル、および動きモデルを含む）を書き込む3、
model.jsを書く（実際には多くのコメント、ない数行のコード）
1import { actions } from "mirrorx";
2import * as api from "./service"; // 把刚才的service.js引入进来，名称定为api
3
4export default {
5 name: "GoodsManager", // 这里写的名字将会成为状态仓库的名称
6 initialState: { // 这里可以写初始化时状态机里的初始状态
7 userId: "0001"
8 },
9 // reducer：状态机处理函数
10 reducers: {
11 // 这个updateState是默认的，它用来主动更新状态机里的各种状态
12 // state和data都是Object对象
13 // state是框架传入的，开发者调用的时候，data才是对应的第一个参数
14 // ...是ES6的对象扩展运算符，后面...data会自动覆盖...state的同名属性
15 updateState: (state, data) => ({ ...state, ...data })
16 // 后面还可以写其他的reducer，切记第一个参数一定是state
17 },
18 effects: {
19 // 动作处理函数：获取商品
20 // param是对象，getState是框架传入的函数对象，用来方便获取当前状态机的状态
21 // 开发者调用的时候，不用给getState形参赋值
22 async GetGoods(param, getState) {
23 // Promise的同步操作运算，获取Axios返回的data
24 let { data } = await api.GetGoodsApi(param);
25 // 调用当前状态机的updateState方法（也就是上面写的那个函数）
26 // 由调用可见，只放了一个Object类型的参数
27 actions.GoodsManager.updateState({ goods: data.data });
28 }
29 }
30};
4、MirrorX管理成分に変換コンポーネント
ローカルプロジェクトの入口の最初のステップは、（例えばapp.jsのメモリにステートマシンを作成するためのコードを追加するなど）を加えます。
1// 引入MirrorX的组件
2import mirror from 'mirrorx';
3// 引入刚刚写的model，注意路径
4import model from './model';
5// 调用MirrorX，根据模型创建状态机
6mirror.model(model);
第二の工程、によってホスト組立状態機械のコードを変更します
1// 增加对MirrorX的引用
2import {connect} from 'mirrorx';
3// 这里面GoodsView就是当前受状态机托管组件的class名称，GoodsManager就是第二步里name写的名字
4export default connect(state => state.GoodsManager)(GoodsView);
5、呼び出しに場所を必要としている次のコードを記述します。
GoodsViewこちらの限り商品のリストへの負荷が表示されるように、我々はコンストラクタ（小道具）関数内でコードを書くことができるように：
1// 组件上需要引入MirrorX的actions
2import {actions} from 'mirrorx';
3// 在constructor(props)函数里写上以下调用即可
4actions.GoodsManager.GetGoods({
5 user:props.userId
6});
その後props.goodsから書面でそれをレンダリングするフロントエンドのコードのレンダリング・インタフェース（第3ステップGetGoods方法が商品の時間を渡すためにあるにupdateStateメソッドを呼び出しますので、現在のコンポーネントの必要性がで小道具から選択するので、品物と呼ばれる）は、テストを開始することができます。
サプリメント
変更が発生した場合、すべての状態値の状態マシンは、内部の小道具で書かれて自動的に管理コンポーネントであり、また、その状態の取得や更新のコンポーネントにしようとしない、に小道具を取り出すことができます。
限りアセンブリによってホストされている状態機械の値の変化は、レンダリング方法、自動更新を再度実行するように。
競合の状態の名前でネストされたコンポーネント、アセンブリ、および状態機械要素の属性値があるため、様々な難病は、実際の現像時に結果として。Antd私の間には、UCFは成熟し、分析の実用的な枠組み、結論に来て、大規模なシステムをmodel.js、service.js一般的には5以上、およびそれらのほとんどは、命名規則をしています。
コードの場合は見ては、逆方向に再びそれを見つけるために、偉大な神のフロントエンドからのコードは、もはや理解することは困難ではありません。
オリジナルリンク：
https://blog.csdn.net/yry0304/article/details/104853557
【終わり】
推奨読書
☞ 3年の刑を言い渡さ違法鉱山技師利益100,000百度、Appleが独禁法訴訟は11億ユーロの罰金を科さ、GitHubには、NPMの買収を提案|オタクの見出し
☞ないインターンとして良いとして善戦$ 220,000の年俸を取りましたか？
☞ Jupyterノートブックで新しいウイルス発生の王冠トラッカーを作成するには？
☞なぜ59歳の呂チーので、「幸運」小さな町、シリコンバレーの入り口の流れ、復旦コーチング、キャリア、で生まれましたか？
☞ どのように安全に統合する際DevOpsチーム変態？同社の出力への影響は何ですか？2019のステータスレポートDevOpsチームの最新の解釈|フォースプログラム
☞ ブロックチェーンの開発者アニュアルレポート|ビットコイン主流、イーサネットは広場、ボーナス終了した「ワンサイズは、すべてが収まる」ブロックチェーン技術を落ちました
あなたは、私が好きなよう真剣に、すべてのポイントを見て
