mobx - redux的优秀替代品

November 18, 2017

在使用react做大型开发的时候，我们习惯使用redux来做数据管控。但是redux实在是太过繁琐，流程很长，不利于快速开发。 mobx是redux作者非常推荐的一个替代产品。 基本概念 # 与redux的长流程，严管控不同，mobx采用一种更直接的方式，和更自动化的方式管理应用的数据。 状态驱动页面更新 # 应用的state也就是其中的数据，就是应用此时所在的状态，状态的改变驱动页面的改变，这是共识，问题就是怎么设计使状态的改变驱动页面更新。 在mobx中，数据将被监视，当数据发生变化的时候，mobx会自动的知道哪些部分需要被刷新，而不需要程序员来指明更新什么。 应用的状态分成两种， 一种是数据本身组成的基本状态。还有一种是在数据基础上计算得出的衍生状态。在下面我们会讨论这些。 observable # 对于需要被监视的数据，就将他用注解的方式注明，需要被监视。 import { observable, computed } from "mobx"; class OrderLine { @observable price = 0; @observable amount = 1; @computed get total() { return this.price * this.amount; } } 就这样简单的就将一个变量纳入mobx的观察体系中。 被观察的可以是几乎所有的javascript的数据结构，但是，对于对象，建议一律转成map来观察，因为对象只会观察此时有的字段，对于未来新添加的字段需要手动加入观察， 但是map就可以将添加进来的新key一并纳入观察。 observer # 有了被观察的，就要有观察者， 这里的观察者会是前端的组件。通常来说，每个组件都应该是可以观察自身数据的，响应式的应用。 一个观察者，会在数据发生变化的时候自动更新自己的视图。 import {observer} from 'mobx-react'; @observer class TimerView extends React.Component { render() { return (<button onClick={this.onReset.bind(this)}> Seconds passed: {this.props.appState.timer} </button>); } onReset () { this. ...