Mobx 状态管理

下载

yarn add mobx

# react绑定库
yarn add mobx-react

暴露配置文件

先把 git 内容提交了。

git add .
git commit -m 'eject弹出配置文件之前的文件版本'

然后使用 eject 命令把配置文件暴露出来

yarn run eject

执行命令时会提示这个操作是不可返回的，问我们是否确认。

使用装饰器

react 默认时是不支持装饰器的，所以我们需要把开发环境设置为支持装饰器函数。

找到项目根目录下的 package.json

"babel": {
    "plugins":[
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy":true
            }
        ],
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose":true
            }
        ]
    ],
    "presets":[
        "react-app"
    ]
}

todolist示例

结构目录

src/
    App.js
    todolist/
        index.js
        inp/
            index.js
        list/
            index.js
    store/
        store.js        

在 store.js 文件中，把需要用到的数据定义出来。

import { observable } from "mobx";

// 使用observable观察store对象的todos（需要先观察数据，那么别人修改数据时，系统才能得到回馈）
class Store {
    @observable todos = [];
    del = (item)=>{
        this.todos = this.todos.filter(obj=>obj.id!==item.id);
    }
}

export default new Store();

装饰器其实就是个函数，即把一个对象传入装饰器函数中，这个对象额外有了一些别的能力

如果不想用上面的 store，那么也可以用下面的 store。

const store = observable({
    todos : [],
    del(item){
        store.todos = store.todos.filter(obj=>obj.id!==item.id);
        console.log(item)
    }
});

export default store;

在 App.js 中，把数据共享出来，无论它的哪一层后代组件，都可以拿到这些数据。

import React from 'react';
import TodoList from './todolist';

// 获取 store 对象
import store from './store/store.js';

// 获取 Provider，使用它把 store 开放出来，这样后代组件就可以使用 store 了。
import { Provider } from 'mobx-react';

class App extends React.Component{
    render(){
        return (
            <Provider store={store}>
                <TodoList></TodoList>
            </Provider>
        )
    }
}

export default App;

TodoList 组件 (todolist/index.js)

import React from 'react';
import Inp from './inp';
import List from './list';

class TodoList extends React.Component{
    render(){        
        return (
            <div>
                <Inp />
                <List />
            </div>
        )
    }
}

export default TodoList;

inp 组件

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

// observer 与 observable 是一组的，后者是被观察的数据，前者是如果数据发生变化，当前组件是否重新渲染。
// 比如 Inp 组件显示了 todos 的数量，如果 Inp 组件有 observer 装饰器，那么每次修改数据时组件重新渲染。
@observer class Inp extends React.Component{
    render(){
        return (
            <ul>
                {this.props.store.todos.length}
                <input ref="input1" />
                <button onClick={()=>{this.props.store.todos.push({
                    id:new Date().getTime(), 
                    val:this.refs.input1.value
                })}}>添加</button>
            </ul>
        )
    }
}

// inject 是连接到 Provider 组件，把其中的 store 数据映射到 Inp 组件上。
export default inject("store")(Inp);

list 组件

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

@observer class List extends React.Component{
    render(){
        var {todos, del} = this.props.store;
        return (
            <ul>
                {todos.map((item)=>(
                    <li key={item.id}>
                        {JSON.stringify(item)}
                        <button onClick={()=>del(item)}>删除</button>
                    </li>
                ))}
            </ul>
        )
    }
}

export default inject("store")(List);