"@ observer"属性は何をしますか？

Question

私がmobx-reactについて知った最初のことは、 "@ observer"属性を使って状態クラスで定義されたプロパティの値を追跡することです。 これは私の下のサンプルです。

//@observer cut it off 
SingUp.js 

    import React, {Component} from 'react' 
    import {observer} from 'mobx-react' 

class SignUp extends Component{ 
    constructor(props){ 
    super(props) 
    } 
    SaveUser(e){ 
    e.preventDefault(); 
    this.props.appState.user.username = this.username.value; 
    this.props.appState.user.password = this.password.value; 
    this.props.appState.postSaveUser(); 
    } 
    render(){<form onSubmit={()=>this.SaveUser(e)}>... 

フォームを送信したときに、 "SaveUser（）"というフォームが呼び出され、アプリ状態の値が設定されました。 SignUpクラスの先頭に "@ observer"属性を定義していないのがわかります

ここでは状態クラスです。 AppState.js

import { observable, action} from "mobx" 
import {user} from './models/user' 

class AppState { 
    @observable user=new user; 
    constructor() { 
    } 
    postSaveUser(){ 
     debugger 
     var asd = this.user 
    } 
} 

私は値が正確に私はそれを「サインイン」コンポーネントを設定してご覧ください「postSaveUser（）」メソッドの値をチェックするときのものは、それは奇妙ですか？

「@ observer」属性で定義されたどのクラスでも割り当てられた値だけを追跡すると思っていましたが、私はそれを使用せずにデータにアクセスできますか？

Answer 1

Reactコンポーネントクラスの@observerデコレータを使用するのは、autorunとよく似ています。最後のレンダーで参照解除されたオブザーバブルが変更されると、コンポーネントは再レンダリングされます。もちろん、観測可能なデータの値を変更することはできますが、@observerデコレータを使用しないと、Reactコンポーネントが自動的に再レン​​ダリングされません。

例（JSBin）

class Store { 
    @observable data = 'cool'; 
} 

const store = new Store(); 

setTimeout(() => { 
    store.data = 'wow'; 
}, 2000); 


@observer 
class Observer extends Component { 
    render() { 
    return <h1> This component will re-render when {store.data} changes.</h1>; 
    } 
}; 

class NonObserver extends Component { 
    render() { 
    return <h1> This component will NOT re-render when {store.data} changes.</h1>; 
    } 
}; 

ReactDOM.render(
    <div> 
    <Observer /> 
    <NonObserver /> 
    </div>, 
    document.getElementById('app') 
);