mobX入门

最新推荐文章于 2025-06-24 10:50:06 发布

最新推荐文章于 2025-06-24 10:50:06 发布 · 2.2k 阅读

文章标签：

本文介绍了MobX作为状态管理库的基础概念和核心API：observable、computed、action和autorun。通过实例展示了如何使用这些API进行状态管理和响应式编程。强调了action在避免多余更新和提高性能中的作用，以及autorun在跟踪状态变化的应用。同时提供了一个MobX与React结合的简单示例。

mobX入门

概述

MobX-状态管理库 MobX

作为一个状态管理库，MobX的一切行为都围绕着状态去做一些处理。对于state，有4个重要的API需要了解，分别是observable, computed, reactions, actions，掌握了这4个API，足以满足我们搭建一个基于MobX的应用程序了。

MobX的核心概念。所有可以从state中派生的事物，都会自动的派生。

说白了就是维护状态。

从上面的话可以看出，首先，我们需要一个state,通过observable，可以把一个已有的数据结构包装成被MobX管理的被观察状态。在MobX中，操作状态被大致分为三种形式，分别是计算，修改以及动作。对应着以下三个API。

computed：用来计算值，并产生新值，但是要注意，不能更改已观察的状态来引起副作用。

action：修改state状态，并且可能产生副作用。

autorun: 细粒度的追踪状态的变化，并作出响应。

举例来说，当需要计算一个数组的长度时，我们只需要观察一个数组，而不需要再去观察一个数组的长度，应为数组的长度可以从已知的数组中推导出来，MobX有一个原则就是定义最小粒度的state，它不需要包含多余的或者可派生的数据。使用computed可以帮助我们完成这个动作。

 
  // 注： 以下所有的例子都基于ES6的语法。对于ES5的写法，可以查询官网。
@computed get getObservableArrayLength() {}
 return this.observableArray.length;

当我们需要对数组做一些操作，如给数组中增加元素，则需要用到action。

 
  @action addItem(){
    this.observableArray.push('newItem');
}

有时在实际的场景中，我们会发现，即便不写@action,对于数组的修改一样会反应到视图上，那么action存在的意义是什么呢？如果你的代码是下面这个样子：

 
  var list = [1,2,3,4,5];
addItem(){
    list.forEach((item) => {
        this.observableArray.push(item);
    })
}
autorun(() => {
    console.log(this.observableArray.length);
})
 
 

打开控制台就会发现，数组的长度被打印了6次，也就是说，MobX发现被观测的数组发生了6次变化，如果这6次变化都反应到视图中，则会render6次，事实上，我们只是想要最后的一次结果而已。但如果加上@action，则数组只会发生一次改变。事实上，在action内部的任何同步操作，都不会被观测，在它内部使用了三个内部函数，untracked，transaction和allowStateChanges。它们保证了在action内部的操作最终只会触发一次改变。

由上面的例子也可以看到，每次对于被观测的数组的操作，都触发了autorun动作，当你需要观测一个状态但并不产生新值时，可以使用autorun，当它所依赖的状态发生任何改变时，都会触发对应动作。还有一个reaction也可以完成类似的动作，并且不会在程序启动时就触发，只有发生改变时才触发。

这里有个MobX+React的小例子。 todoList,可以参考一下。

详情关注博客 https://mmmaming.github.io/