React with MobXを使用して直接状態を変更することはできますか？

Question

私はそれをやってはならない唯一の理由は、反応の更新ビューを許可することです。 https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly
しかし、MobX反応は私のためにこれらの汚い仕事をするようです。私はちょうどthis.stateを観測可能とマークする必要があり、すべてが期待通りに機能します。何か欠点はありますか？私はすべての州を巨大な店に捨てるつもりはない。

JSFiddle link

コード：あなたはform代わりのstateそれに名前を付けることができますし、それは気にしないだろう

const {observable, computed} = mobx; 
const {observer} = mobxReact; 
const {Component} = React; 

@observer 
class Form extends React.Component{ 
    @observable state = { 
     username: '', 
     password: '', 
    }; 

    constructor(...args) { 
     super(...args); 
     this.handleSubmit = this.handleSubmit.bind(this) 
    } 

    render() { 
     return <form onSubmit={this.handleSubmit}> 
        <label> 
        Name: 
        <input type="text" value={this.state.username} onChange={event => this.state.username = event.target.value} /> 
        </label> 
        <div>username: {this.state.username}</div> 
        <input type="submit" value="Submit" /> 
       </form>; 
    } 

    handleSubmit(event: Event) { 
     event.preventDefault(); 
     console.log(this.state.username); 
    } 
} 

ReactDOM.render(
    <div> 
     <Form /> 
     <mobxDevtools.default /> 
    </div> 
, document.getElementById('mount')); 

Answer 1

、そのバイパスはのsetStateと再レンダリングメカニズムを反応します。 React setStateは、コンポーネントの状態の更新をマージするだけでなく、コンポーネントに再レンダリングを指示します。反応成分はforceUpdateである。

MobXも更新します。observableを更新すると、接続されたobserverコンポーネントにもメッセージが送信され、更新されます。中央の状態ストアを持つことは、Reactとの確立されたパターンです。

Answer 2

stateをバイパスして、観察可能なデータをクラスに直接入力するのが最適です。

例（JS Bin）

const {observable, computed} = mobx; 
const {observer} = mobxReact; 
const {Component} = React; 

@observer 
class Form extends React.Component{ 
    @observable username = ''; 
    @observable password = ''; 

    constructor(props) { 
     super(props); 
     this.handleSubmit = this.handleSubmit.bind(this) 
    } 

    render() { 
     return <form onSubmit={this.handleSubmit}> 
      <label> 
       Name: 
       <input type="text" value={this.username} onChange={event => this.username = event.target.value} /> 
      </label> 
      <div>username: {this.username}</div> 
      <input type="submit" value="Submit" /> 
     </form>; 
    } 

    handleSubmit(event: Event) { 
     event.preventDefault(); 
     console.log(this.username, this.password); 
    } 
} 

ReactDOM.render(
    <div> 
     <Form /> 
    </div> 
, document.getElementById('mount'));