MobxとMobe-Reactバカチュートリアル

私もあまりできないので、とても白いことを話していますが、多くの人がこのような白い教程が必要だと信じています.そして、私がまだ整理しているうちに、急いで覚えて、明日の記憶喪失を防ぐことができます.
何してるの?
多くのチュートリアルは直接どのように使うかを話していますが、私は先にこれが何の役に立つかを話すべきだと思います.
グローバル有効データを格納する.
例えば、Reactでは1ページ分のデータをそのページのstateに保存することを考えていますが、より多くのページを想定すると、これらのページに何の関連もない場合に同じデータを使う必要があり、1ページでデータ修正を行った後、他のページでも読み取ることができるので、これを使う必要があります.共有する必要があるデータを保存します.
この点を明らかにすると、問題はどのようにデータを保存するかである.
アクセサリーと個人的に満足している例
まず、前端のシロとして、初めて@action@observableというものを見たとき、直接呆然としていました.これは何の鬼ですか.私の先端はまだ数年前の記憶にあります.
それから、私が説明したのは間違いで、あるいは正確ではありませんが、出発点はあなたがこのものがどのように使われているかを理解するのに役立ちます.私たちの白にとって、先に使うことができて、使っているうちに、原理は自然に出てきました.あなたは簡単に理解することができます.あなたの手紙の数の前に別の関数を実行して、この関数はいったい何をしたのか、気にしないでください.彼があなたのコードにどんな影響を及ぼすかを直接見ればいいです.
次に、銀行がお金を引き出す例を挙げます.安心して、コードばかりではありません.
家には銀行の口座番号がたくさんありますが、両親が専門に使っているものもあります.みんなが共用しているものもあります.例えば、お年玉です.
区別するために、みんなが使える口座番号の通帳に@observableのロゴを貼って、みんなはこのロゴを見て、これはみんなが共用していることを示しています.そして、このお金を使うルートを決めました.

野菜を買う:50を超えたら却下し、そうでなければ相応の野菜代

を控除する.

游园地へ行きます:もし今日土曜日と日曜日でなければ却下して、さもなくば相応の入场料の

を差し引きます

等

皆さんはこれらの規則を通告に書きました.

//                       ，       ，          .....
class     {
    //     ，         
    @observable       ;
      =(  )=>{
        if(  >50){
            return false;
        }else{
            this.      -=  ;
        }
    }
        =(   )=>{
        if(      ，  ){
            return false;
        }else{
            this.      -=   ;
        }
    }
}
//              
const        =new     ();
export default         

はい、ここまで家族のルールを定義しました.それから1ヶ月の暗い風の高い夜、あなたとお父さんは遊園地を襲撃するつもりです.お母さんは料理を買うつもりです.

import { inject, observer } from 'mobx-react'
import React from 'react'
//         ，             ，                  
@inject(      )
//   observer       
@observer
class           extends React.Component{
    render(){
        {
            this.props.      .      >=   
            ?       
            :      
        }
    }
}
export default          

さあ、お父さんとの小さな計画を見てからお母さんに会いに来てください.

import { inject, observer } from 'mobx-react'
import React from 'react'
@inject(     )
@observer
class           extends React.Component{
    render(){
        if(         ){
                return (
                    {/**   ...**/}
                )
            }else{
                if(this.props.      .      >=  ){
                    return(    );
                }else{
                    return(    );
                }
            }
    }
}
export default          

ここまで来て@observerの意味を説明しましょう.まず、あなたたちは誰も現金を持っていません!!!お金はどこですか.銀行では、つまり、お母さんが先に料理を買ったら、あなたとお父さんのお金が足りません.もしお父さんと遊園地に入ったら、お母さんは料理が買えない可能性があります.あなたたちはthis.props. . を共用しています.
@inject()がデータを導入することにより、コンポーネントのthis.props.にデータが自動的に保存する.Mobe-Reactに類比すると、必要なデータはthis.stateに格納されず、共通のキャッシュに格納されます.キャッシュ中のデータの変更は@observerのデータを引き起こします.Reactに対応すると、ページのビューが再レンダリングされます.
ここでは、公共という2つの字の意味を説明します.

第一に、みんなはすべてこの口座の中の具体的な残高を知っている権利があって、もし公共でなければ、あなたは知る権利がないかもしれません.例えば、あなたのお母さんはあなたの小さい頃のお年玉で累計した口座を持っていますが、あなたは永遠に中がいったいいくらなのか、あるいはあなたのお父さんの金庫の中でいくらなのかなど

を知っていません.

第二に、この金庫の中のお金を使うにはみんなが決めた方法しか使えない.それ以外に、この金庫の中のお金を修正することはできない.
@action
上は非厳格なモードで、いったん厳格なモードを开いたら、この関数の中でキャッシュデータを修正したことを宣言する必要があります.分からなくても大丈夫です.ソースコードを见に行きます.この时、少なくとも入门から放弃することはありません.