TypeScript 下 React + MobX 入门

why MobX？

React是一个view层的解决方案，当我们只用它来展示一些静态数据时，无需引入任何一种状态管理库。

当多个有状态组件进行复杂的交互时，如果不引入状态管理插件，只用state来实现，组件间的状态交互将使代码异常复杂，业务数据和UI交互耦合，难以阅读。

业界比较流行的状态管理库是redux，但是redux难以上手，学习难度较高，不适合前端玩票选手。
相比之下，MobX是一个异常简单且可扩展性高的状态管理库，上手简单，功能强大，适合中小型系统。

准备工作

npm install mobx --save
npm install mobx-react --save
tsconfig.json中增加"experimentalDecorators": true

第一个demo

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { observer } from 'mobx-react';
import { observable, useStrict, action, runInAction, computed } from 'mobx';

// 启用mobx严格模式，严格模式下不允许直接修改@observable修饰的数据，需@action修饰的方法来修改。原则上必须用严格模式。
useStrict(true);
class Store {
    @observable title:string = '请点击我！';

    @action changeTitle() {
        this.title = '已经点击了！';
    }
}

const store = new Store();

@observer
class TitlePanel extends React.Component<{},{}> {
    render() {
        return(
 store.changeTitle()}>{store.title}
);
    }
}
ReactDom.render( ,document.body);

这里用了三个陌生的注解，@observable修饰的数据和@observer修饰的组件绑定，当数据发生变化时，组件对应变化。@action修饰的方法用来改变数据。非常简单易懂。

如果不用mobx，这个demo是这样的：

class TitlePanels extends React.Component<{}, {}> {
    public state = { title: '请点击我' };
    constructor() {
        super();
        this.onChange = this.onChange.bind(this);
    }
    onChange() {
        this.setState({ title: '已经点击了！' });
    }
    render() {
        return (
{this.state.title}
);
    }
}

看起来好像没什么区别，不使用mobx代码量还少一点。所以当只维护一个有状态组件时，无需使用mobx。
但是当多个子父组件联动时，使用了mobx，只需在store中维护一份数据，即可控制多个组件的状态，大大简化组件间交互的逻辑，这也是mobx的价值所在。

runInAction

@action 只能影响正在运行的函数，而无法影响当前函数调用的异步操作。
所以当@action中有异步请求时，需要用runInAction()包裹。调用后，这个action方法会立刻执行。不用runInAction()，异步方法运行时会报错。
还是第一个demo，当要改变的数据是从后台请求到时：

    @action changeTitle() {
        post('post/getTitle', res => {
            runInAction(() => {
                //res.title='已经点击了！'
                this.title = res.title;
            });
        });
    }

computed——计算属性

直接上demo：

useStrict(true);
class Store {
    @observable goods: any = { price: 20, number: 100 };
    @computed get total() {
        return this.goods.price * this.goods.number;
    }
    @action changePrice() {
        this.goods.price = Math.floor(Math.random() * 100);
    }
}

const store = new Store();

@observer
class TitlePanel extends React.Component<{}, {}> {
    render() {
        return (

            
{`单价：${store.goods.price},数量：${store.goods.number},总价${store.total}`}
             { store.changePrice() }}>{'点击改变单价'}
        
);
    }
}
ReactDom.render(, document.body);

@computed 修饰的方法一般用来做计算/单位转换/格式转换等工作。我们当然可以用@aciton或者直接在render()中计算。

@computed的优点是可以缓存计算后的值，提升效率。像demo里这种每次都是不同值，用@computed没有优势。

@observable修饰数组

@observable可以修饰任何js类型，包括string、number、object、array。
修饰array时会有一些需要注意的地方，请看demo。