将 React 与 MobX 一起使用时，我可以直接修改状态吗？

Question

我不应该这样做的唯一原因是让反应更新视图。 https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly
但似乎 MobX-react 为我做了这些肮脏的工作。我只需要将 this.state 标记为可观察的，一切都按预期进行。有什么缺点吗？我不想把所有州都扔进一个巨大的商店。

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

Answer 1

你可以将它命名为 form 而不是 state 并且它不会在意，它绕过了 React 的 setState 和重新渲染机制。 React setState 除了将状态更新合并到组件之外，还会告诉您的组件重新渲染。 React 组件有一个 forceUpdate。

MobX 也可以同时完成这两项工作，通过更新 observables，您还可以向连接的 observer 组件发送消息以更新它们自己。拥有中央状态存储是 React 的既定模式。

Answer 2

最好完全绕过 state，直接将可观察数据放在 class 上。

示例 (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'));

将 React 与 MobX 一起使用时，我可以直接修改状态吗？

Can I modify state directly when using React with MobX?

javascript

reactjs

mobx

mobx-react