當使用React with MobX時，可以直接修改狀態嗎？

我不應該這樣做的唯一原因是讓反應更新視圖。 https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly
但似乎MobX反應爲我做這些骯髒的工作。我只需要將this.state標記爲可觀察，並且一切都按預期工作。有什麼缺點嗎？我不想把所有的州都放進一家大商店。當使用React with MobX時，可以直接修改狀態嗎？

JSFiddle link

代碼：

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'));

來源

2017-03-16 Zen

你可以將其命名form而不是state，也不會在意，它繞過陣營的setState和重新呈現機制。 React setState，除了合併狀態更新到組件，還告訴你的組件重新渲染。 React組件有一個forceUpdate。

MobX還可以通過更新observable來發送消息給連接的observer組件進行更新。擁有一箇中央國家商店是React的一個成熟模式。

來源

2017-03-16 11:17:44 aitchnyu

所以，'setState'做無非安排VDOM差異嗎？ – Zen

@Zen它將輸入合併到實際狀態後這樣做。 – aitchnyu

最好完全繞過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'));

來源

2017-03-16 11:23:26 Tholle

當使用React with MobX時，可以直接修改狀態嗎？

回答

相關問題