当使用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时，可以直接修改状态吗？

回答

相关问题