Mobx核心概念

基本介绍

Mobx作为状态管理的特点就是简单课扩展，是所有状态管理库中侵入性最小的之一。React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。

核心概念

Observable state

可以用任何你喜欢的数据结构来存储状态，如对象、数组、类。循环数据结构、引用，都没有关系。只要确保所有会随时间流逝而改变的属性打上 mobx 的标记使它们变得可观察即可。

  import {observable} from 'mobx';
  var appState = observable({
    timer: 0
});

Computed values

计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值。概念上来说，它们与excel表格中的公式十分相似。如果你用过vue的计算属性，2者有很多相似地方。不要把 computed 和 autorun 搞混。它们都是响应式调用的表达式，但是，如果你想响应式的产生一个可以被其它 observer 使用的值，请使用 @computed，如果你不想产生一个新值，而想要达到一个效果，请使用 autorun。举例来说，效果是像打印日志、发起网络请求等这样命令式的副作用。如果任何影响计算值的值发生变化了，计算值将根据状态自动进行衍生。计算值在大多数情况下可以被 MobX 优化的，因为它们被认为是纯函数。例如，如果前一个计算中使用的数据没有更改，计算属性将不会重新运行。如果某个其它计算属性或 reaction 未使用该计算属性，也不会重新运行。在这种情况下，它将被暂停。

import {observable, computed} from "mobx";

class OrderLine {
    @observable price = 0;
    @observable amount = 1;

    constructor(price) {
        this.price = price;
    }

    @computed get total() {
        return this.price * this.amount;
    }
}

observer

如果你用 React 的话，可以把你的(无状态函数)组件变成响应式组件，方法是在组件上添加 observer 函数/ 装饰器. observer由 mobx-react 包提供的。装饰器是对一个类进行处理的函数，用来修改类的行为。

 @testable
 class MyTestableClass {
     //....
 }
 
 function testable(target){
     target.isTestable =true;
 }
 
 MyTestableClass.isTestable //true

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.props.appState.resetTimer();
    }
};

ReactDOM.render(<TimerView appState={appState} />, document.body);

基本介绍

核心概念

Observable state

Computed values

observer

猜你喜欢