MobX-10分極速入門MobXとReact

MobXは、シンプルで拡張性に優れ、試練に耐えられるステータス管理ソリューションです.このチュートリアルは、MobXの重要な概念を10分以内に紹介することを目的としています.MobXは独立した苦しみですが、多くの人がReactと一緒に使っているので、このチュートリアルではこの組み合わせの展開に着目しています.
コアコンセプト
Stateは各アプリケーションの核心部分であり、規範に合わないStateを使用すると、バグと暴走に満ちた不二法門、またはローカル変数が囲まれ、stateが同期を失うことになります.この問題を解決しようとするフレームワークはたくさんあります.例えば、可変stateを使用しますが、データの正規化、完全性制約の失効など、新しい問題が発生しています.
MobXは、暴走したstateを生成することを許さないことを簡単にしました.その理念も簡単です:stateから派生できるすべてのものは、自動的に派生します.
MobXをExcel表に想像します.
まず、object、array、primitivesなど、プログラムを構成する任意の部分であるstateがあります.これをアプリケーションの「セル」と想像することができます.
次にderivationsで、一般的にstateから直接計算できる結果を指します.たとえば、未完了のタスクの数など、これは簡単ですが、タスク表示のhtmlをレンダリングするなど、少し複雑にすることもできます.アプリケーションの「式とグラフ」に似ています.
Reactionsはderivationsに似ていますが、reactionsはデータ結果を生成するのではなく、I/Oに関連するタスクを自動的に完了するのが主な違いです.彼らはDOMとネットワークリクエストが自動的に適時に出発することを保証した.
最後はactionsです.Actionsとはstateを変更するすべてのことを指し、MobXはすべてのactionsが対応するderivationsとreactionsが伴って同期を保証することを保証します.
簡単なtodoのstate
理論はたくさん言っているので、一つの例を見るともっと分かるかもしれません.簡単なtodoプログラムから始めます.
下はシンプルでストレートなTodoStoreで、魚丸はなく、太麺もなく、MobXもなく・・・

class TodoStore {
 todos = [];
 
 getcompletedTodosCount() {
    return this.todos.filter(
 todo => todo.completed === true
 ).length;
    }
 
 report() {
 if (this.todos.length === 0)
 return "";
 return `Nexttodo: "${this.todos[0].task}". ` + 
 `Progress: ${this.completedTodosCount}/${this.todos.length}`; 
 }
 
    addTodo(task) {
 this.todos.push({ 
 task: task,
 completed: false,
            assignee: null
 });
 }
}
 
const todoStore = new TodoStore();

todoStoreを作成しました.todosセットを持っています.今、このtodoStoreに何かを追加します.明らかにするために、場所を変更するたびにtodoStore.reportを呼び出します.

todoStore.addTodo("read MobX tutorial");
console.log(todoStore.report());
​
todoStore.addTodo("try MobX");
console.log(todoStore.report());
​
todoStore.todos[0].completed = true;
console.log(todoStore.report());
​
todoStore.todos[1].task = "try MobX in own project";
console.log(todoStore.report());
​
todoStore.todos[0].task = "grok MobX tutorial";
console.log(todoStore.report());

今まで、特に何もありませんでした.しかし、reportメソッドを手動で呼び出さないと、より良いことになりますか?私たちは欲しいところでこのstateを修正するだけで、すべての報告は自動的にします.
偶然ですね.これがMobXがあなたのためにできることです.自動実行はstateが変更されたときにのみトリガーされ、Excelのグラフがセルデータが変更されたときにのみ更新されるようになります.この目標を達成するために、TodoStoreは観測可能(observable)にならなければならないので、コードを変更しましょう.
また、completedTodosCountプロパティは、@observableと@computedデコレーションを使用して自動的に派生する必要があります.

class ObservableTodoStore {
    @observabletodos = [];
    @observablependingRequests = 0;
 
    constructor() {
        mobx.autorun(() => console.log(this.report));
    }
 
    @computedgetcompletedTodosCount() {
    return this.todos.filter(
 todo => todo.completed === true
 ).length;
    }
 
    @computedgetreport() {
        if (this.todos.length === 0)
            return "";
 return `Nexttodo: "${this.todos[0].task}". ` + 
    `Progress: ${this.completedTodosCount}/${this.todos.length}`; 
 }
 
    addTodo(task) {
 this.todos.push({ 
    task: task,
    completed: false,
    assignee: null
 });
    }
}
 
const observableTodoStore = new ObservableTodoStore();

それを実行すると、素晴らしいです.私たちは値を割り当てるたびに出力結果を得ることができます.
pendingRequestsがしばらく使われていないので、後で使います.また、このチュートリアルではES 6の書き方が使われていますが、MobXではES 5の書き方もサポートされています.
このコンストラクタではautorunを使用してreportを出す小さな関数を包みました.Autorunの中のものはまず1回実行され、その中の関数にobservableのデータが変化した場合、再び実行されます.ここではtodosプロパティを使用し、todosが変化するたびに新しいものを印刷します.

observableTodoStore.addTodo("read MobX tutorial");
observableTodoStore.addTodo("try MobX");
observableTodoStore.todos[0].completed = true;
observableTodoStore.todos[1].task = "try MobX in own project";
observableTodoStore.todos[0].task = "grok MobX tutorial";

(自分で結果を試すことができます)
とても面白いですね.reportは確かに自分で実行しました.そして、同期は正確です.実行結果をよく見ると、todos[1]のデータを変更し、reportで指定したデータはtodos[1]の変化で変化しないため、揮発性の4番目の文は出力を生成しません.5番目の文でtodos[0]を修正したデータが出力されます.この例はautorunが簡単にtodosを監視したのではなく,具体的な項目に正確であることをよく説明している.
Reactをより美しくする
はい、今まで知られていませんが、reportを自動化しました.本当のことを言ってreactを散歩しました.reactのコンポーネントがmobxを認識するためには、mobx-reactパッケージを使用して完了する必要があります.autorunを使用して、コンポーネントとstateを自動的に同期させる必要があります.これは、上のreportを自動的に出力させるのと同じように簡単です.
次はreactコンポーネントです.唯一のMobXが登場する場所は@observer修飾子です.これで十分です.setStateを使用する必要はありません.このコンポーネントがstateのどの部分に注目する必要があるかを示す必要はありません.手動で高次コンポーネントを書くこともできません.一般的に、すべての部品は人工知能になり、彼が人形(純粋な展示)コンポーネントとして定義されても.

@observer
class TodoListextends React.Component {
  render() {
    const store = this.props.store;
    return (
      

        { store.report }
        

          { store.todos.map(
            (todo, idx) => 
          ) }
        
        { store.pendingRequests > 0 ? Loading... : null }
        this.onNewTodo }>New Todo
         (double-click a todo to edit)
      
    
    );
  }
​
  onNewTodo = () => {
    this.props.store.addTodo(prompt('Enter a new todo:','coffee plz'));
  }
}
​
@observer
class TodoViewextends React.Component {
  render() {
    const todo = this.props.todo;
    return (
      this.onRename }>
        'checkbox'
          checked={ todo.completed }
          onChange={ this.onToggleCompleted }
        />
        { todo.task }
        { todo.assignee
          ? { todo.assignee.name }
          : null
        }
      
    
    );
  }
​
  onToggleCompleted = () => {
    const todo = this.props.todo;
    todo.completed = !todo.completed;
  }
​
  onRename = () => {
    const todo = this.props.todo;
    todo.task = prompt('Task name', todo.task) || todo.task;
  }
}
​
ReactDOM.render(
  ,
  document.getElementById('reactjs-app')
);

次の文を実行すると、MobXがデータの変更をインタフェースに反映していることがわかります.

store.todos[0].completed = !store.todos[0].completed;
store.todos[1].task = "Random todo " + Math.random();
store.todos.push({ task: "Find a fine cheese", completed: true });
// etc etc.. add your own statements here...

リファレンスの使用(References)
これでobservableを使用してデータ型を作成しました.MobXは引用に対応できるかと思うかもしれません.前の例では、もう一つのassigneeのプロパティを考えたかもしれませんが、ここに別のstoreを置いてtasksに値を割り当てます.

var peopleStore = mobx.observable([
  { name: "Michel" },
  { name: "Me" }
]);
observableTodoStore.todos[0].assignee = peopleStore[0];
observableTodoStore.todos[1].assignee = peopleStore[1];
peopleStore[0].name = "Michel Weststrate";

間違いなく、MobXはすべてをきちんと管理しています.MobXを使用して、仕様話データを必要とせず、コントロールを示す必要はありません.実際にあなたのデータはどこにあっても構いません.observaleさえあれば、何でもいいです.
まとめ
簡単な修飾器だけでreactプログラムを生き生きと面白くします最後にまとめます.
@observale修飾器またはobservable関数は、オブジェクトを追跡できます.
@computed修飾器は自動演算の式を創造した.
Autorun関数はobservableに依存する関数を自動的に実行させ、これはlogを書くために使用され、要求を出すのがいいです.
@observer修飾器はReact構築を自動化し、自動的に更新され、大きなプログラムでもよく機能します.
最後にMobXは状態容器ではありません
多くの人がMobXを別のReduxと見なしていますが、それはライブラリにすぎず、アーキテクチャではありません.上の例では、HackerNewsで言われているように、プログラマーが自分で論理やstore、コントローラを組織する必要があります.
“MobX, it’s been mentioned elsewhere but I can’t help but sing its praises. Writing in MobX means that using controllers/dispatchers/actions/supervisors or another form of managing dataflow returns to being an architectural concern you can pattern to your application’s needs, rather than being something that’s required by default for anything more than a Todo app.”