mobx基本使用

相比redux的不够直观，mobx就是React状态管理的福音，如果只是在React项目中基本使用的话，会非常直观。

需要使用的库就是mobx和mobx-react两个。

使用建议

mobx有函数式和装饰器两种语法方式，更推荐装饰器，该种方式更加简单方便。

最常用的API

其实最常用的API就那个几个。

mobx:

• observable：定义可观察状态
• computed：根据相关可观察状态计算新值，相当于Vue的计算属性
• action：推荐的用于修改可观察状态的唯一途径

mobx-react：

• Provider：使用React的context机制来传递mobx的可观察状态
• inject：从Provider提供的context域中挑选store作为props传递给目标组件
• observer：将React组件转变成响应式组件。当组件使用的可观察状态发生变化时，组件会重新运行render函数，重新渲染UI

简单用例

-- Store.js

定义可观察状态，计算值和修改可观察状态的方法。

import {observable,computed,action} from 'mobx';

class mobxStore{
    @observable todos = []; // 定义可观察状态

    @computed get todosCount(){ // 根据相关的状态，计算新值，相当于Vue的计算属性
        return this.todos.length;
    }

    @action addTodo(todo){ //推荐的修改可观察状态的方法
        this.todos.push(todo);
    }
}

export default new mobxStore();

-- Component.js

在组件中注入指定的Store并使用

import React from 'react';
import {observer,inject} from 'mobx-react';

@inject("mobxStore") // 从Provider提供的context域中挑选Store
@observer //让组件变成响应式组件
class Decorter extends React.Component {
    render() {
        let {mobxStore} = this.props;
        return <div>
            <button onClick={()=> mobxStore.addTodo("新增的任务")}>添加任务</button>
            {mobxStore.todos.map((item,index)=>{
                return <div key={index}>{item}</div>
            })}
        </div>
    }
}
export default Decorter;

-- index.js

利用mobx-react的ProviderAPI提供相关的Store。

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'mobx-react';
import someStore from './store/mobx';
import Decorter from "./components/decorterTest";

ReactDOM.render(
    <React.StrictMode>
        <Provider mobxStore={someStore}>
            <Decorter />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);