前言

在我们项目开发中，我们都必不可少的会用到状态管理器，这时候我们就要选择一个合适又趁手的工具了，那这里我就来给小伙伴们推荐一个简单又强大的状态管理器------Mobx。

介绍

首先，我们来介绍一下Mobx状态管理器，Mobx它采用的是响应式编程，可以帮助我们轻松的管理和跟踪项目中数据的状态变化。它不仅支持 React 还支持React Native和其他一些 javascript(例如 vue 等等) 项目。

对于我们而言，它具有如下的优点：

简洁和易用： Mobx 的设计思想就是保持简单和最小化，在项目中使用非常直观和容易上手。我们只需要用它提供出来的AP方法来标记数据，它即可帮助我们自动追踪和更新状态。
响应式： Mobx 使用了观察者模式，被它追踪的数据会自动计算并渲染。
性能好： Mobx小巧轻便，状态更新机制也更加高效，这使得它的性能十分出色。
灵活：Mobx 可以适用于多种架构，可以不同的框架和库一起使用。

使用

在使用之前，我们首先要清楚，Mobx 有三个非常重要的概念, 分别为:

State(状态): State指的就是能被 Mobx 追踪到的响应式状态数据。当 Mobx 观察到状态发生变化时，相关的依赖就会自动更新。
Conputed(计算属性): Conputed 与 Vue 的 Conputed 相似，具有缓存机制，只有在其依的状态发生变化时，计算属性才会重新计算。
Action(动作): Action 则是用来改变状态的，为了确保状态的一致性和可追踪性，在仓库里定义的状态都必须在内部提供修改的方法。

在了解完 Mobx 的这三个核心概念之后，接下来我们展开细细的说说它们是如何使用的。

准备

在详细展开之前，我们还要做一些准备工作，毕竟概念再详细，他也得在在仓库里才能派上用场。所以我们首先要搭建一个仓库。

如下所示：我们先创建好一个这样的仓库。inedx.js 是我们将仓库抛出的给项目引用的文件，task.Store.js 则是我们大展拳脚的仓库。

index.js 文件内容如下:

javascript 复制代码

import React from 'react';
import TaskStore from './task.Store';
// 实例化根store, 并注入context
const StoreContext = React.createContext( new TaskStore())
export const useStore = () => React.useContext(StoreContext)

task.Store.js 文件如下:

arduino 复制代码

class TaskStore {
}
export default TaskSto

这样一个空仓库我们就已经建好并抛出了。

State

当我们建完了空仓库之后，我们即可在仓库内定义我们需要的状态了。

yaml 复制代码

class TaskStore {
    list = [
        {
            id: 1,
            name: 'react',
            isDone: false
        },
        {
            id: 2,
            name: 'vue',
            isDone: false
        }
    ]
}

例如上述代码一样，我们定义出来的 list 状态就是可以被我们追踪到了状态了，我们可以其中定义任何类型。

Action

在上面的步骤里，我们已经定义好了我们的状态，接着就是修改这状态的动作了。

javascript 复制代码

class TaskStore {
    checkItem (id) {
       const item =  this.list.find((item) => {
            return item.id == id
        })
        item.isDone = !item.isDone
    }
    delItem(id) {
       this.list = this.list.filter(item => item.id !== id)
    }
}

如上述代码，我们通过 this 属性就可拿到我们仓库内部的状态，再通过函数的方式来进行对这些状态修改的动作。这样我们确保状态的一致性和可追踪性了。

Conputed

这计算属性与状态的定义就有一些的不用，它不能直接定义在仓库中，而是需要一些如下的操作。

kotlin 复制代码

import { makeAutoObservable, computed} from 'mobx'
class TaskStore {
    constructor () {
        makeAutoObservable(this, {
            completed: computed,
            allTask: computed
        })
    }
    get completed() {
        return this.list.filter(item => item.isDone).length
    }
    get allTask() {
        return this.list.length
    }
}

如上述代码所示，我们额外借助了 Mobx 的makeAutoObservable和computed两个 API 方法去将completed和allTask声明成计算属性，这样我们才能将其定义成计算属性。

应用

在我们成功的将我们需要的状态放入仓库以后，那下一步就该在项目中应用了。这应用分三步走。

第一步，我们将仓库引入到组件中，并实例化它的动作和状态，代码如下所示：

javascript 复制代码

import { useStore } from '../../stroe'
function TodoList() {
    const taskStore= useStore()
    const onChange = (id) => taskStore.checkItem(id)
    const onDel = (id) => taskStore.delItem(id)
}

第二步，我们将仓库与组件串联起来，这里用到的就是 Mobx 提供的一个 API 方法，代码如下所示：

javascript 复制代码

import { observer } from 'mobx-react-lite'
export default observer(TodoList)

第三步，我们接口直接在 DOM 结构上使用了。

这样我们就完成了仓库和组件的联动。实现了对某些状态的全局管理了。

总结

总的来说， Mobx 虽然是简洁易用，且也能很好的适用于项目中，但是它不是React官方支持的状态管理器，某些场景特殊我们可能需要做一些额外的操作才能良好的集成。所以在使用时我们也需要考虑我们项目的大小和使用的场景它能不能完美的适配。

简单又强大的状态管理器——Mobx

前言

介绍

使用

准备

State

Action

Conputed

应用

总结