Могу ли я напрямую изменять состояние при использовании React с MobX?

Единственная причина, по которой я не должен этого делать, - позволить реагировать на обновление. https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly
Но похоже, что MobX-react делает за меня эту грязную работу. Мне просто нужно отметить this.state как наблюдаемое, и все работает как положено. Есть ли недостатки? Я не хочу бросать все штаты в гигантский магазин.

Ссылка JSFiddle

Код:

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

reactjs javascript mobx mobx-react
person Zen    schedule 16.03.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете назвать его form вместо state, и ему будет все равно, он будет обходить setState React и механизм повторного рендеринга. React setState, помимо слияния обновлений состояния компонента, также сообщает вашему компоненту о необходимости повторной визуализации. Компоненты React имеют forceUpdate.

MobX также делает и то, и другое: обновляя observables, вы также отправляете сообщение подключенным observer компонентам, чтобы они обновились. А наличие центрального государственного хранилища - это устоявшийся шаблон с React.

person Jesvin Jose    schedule 16.03.2017
comment
Итак, setState не делает ничего, кроме планирования vdom diff? - person Zen; 16.03.2017
comment
@Zen Это происходит после слияния ввода с фактическим состоянием. - person Jesvin Jose; 17.03.2017

arrow_upward
3
arrow_downward

Лучше всего полностью обойти 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'));
person Tholle    schedule 16.03.2017
comment
Я наткнулся на этот ответ и пытался реализовать его в своем проекте. Однако я получаю сообщение об ошибке Parsing error: Leading decorators must be attached to a class declaration, поскольку кажется, что он просто работает с классами. Вы можете взглянуть на это, пожалуйста? stackoverflow.com/questions/67004479/ можно ли сделать это с помощью функциональных компонентов? - person Manuel Abascal; 08.04.2021