mobx基本使用

mobx是一个简单可扩展的状态管理库

基本概念

1. state(状态) 状态是驱动应用的数据，像有数据的excel表格

2.derivations（衍生） 任何源自状态并且不会再进一步相互作用的东西。比如用户界面，待办事件的数量，把变化发送到服务端

两种类型的衍生

（1）computed values 是可以使用pure function从state中推导的值，mobx可以自动更新，并且在不在使用时将其优化掉，比如

@computed get completedTodos(){
    return this.todos.filter(todo => todo.done)
}

(2)reactions很像computed values，会对state的变化做出反应，例如更新UI

const Todos = observer({todos} =>
    <ul>
        todos.map( todo =>
            <li>{todo.title}</li>
        )
    </ul>
)

3.actions动作 动作 是任一一段可以改变状态的代码。用户事件、后端数据推送、预定事件、等等。 动作类似于用户在excel单元格中输入一个新的值。

actions可以改变state，并且是唯一改变state的东西

原则

MobX 支持单向数据流，也就是动作改变状态，而状态的改变会更新所有受影响的视图。

当状态改变时，所有衍生都会进行原子级的自动更新，不能观测到中间值。

所有衍生默认的都是同步更新。动作可以在改变状态之后直接安全的检查计算值？？？

计算值是延迟更新的，不使用的计算值不更新，直到使用时。

所有的计算值都是纯净的，不应该用来改变state

mobx工作流程

事件调用actions，actions可以改变state，并且唯一能改变state的就是action

@action onClick = () => {
    this.props.todo.done = true;
}

state是可观察的，并且不包含冗余的数据

@observable todos = [{
    title: 'learn mobx',
    done: false
}]

computed values 是可以使用pure function从state中推导的值，mobx可以自动更新，并且在不在使用时将其优化掉

@computed get completedTodos(){
    return this.todos.filter(todo => todo.done)
}

reactions很像computed values，会对state的变化做出反应，例如更新UI

const Todos = observer({todos} =>
    <ul>
        todos.map( todo =>
            <li>{todo.title}</li>
        )
    </ul>
)

一个例子

1.定义状态并使其可观察

所有改变的属性打上，mobx的标记使其变得可观察。

import {observable} from 'mobx';

var appState = observable({
    timer:0
});

2.创建视图以响应状态的变化

创建视图，在appState中相关数据发生改变时视图会自动更新。

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

定义一个按钮，显示timer，当点击这个按钮时，调用reset函数，重置时间。

3.更改状态

每秒都修改数据，当需要的时候UI自动更新

appState.resetTimer = action(function reset(){
    appState.timer = 0;
});

setInterval(action(function tick(){
    appState.timer +=1;
}),1000);

--observable(value)
--@observable classProperty = value

const list = observable([1, 2, 4]);
list[2] = 3;

import { observable, computed } from "mobx";

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

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

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;
    }
}

class Foo {
    @observable length = 2;
    @computed get squared() {
        return this.length * this.length;
    }
    set squared(value) { // 这是一个自动的动作，不需要注解
        this.length = Math.sqrt(value);
    }
}

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));

var disposer = autorun(() => console.log(sum.get()));
// 输出 '6'
numbers.push(4);
// 输出 '10'

class Ticker {
    @observable tick = 0

    @action.bound
    increment() {
        this.tick++ // 'this' 永远都是正确的
    }
}

const ticker = new Ticker()
setInterval(ticker.increment, 1000)