MobX入门基础

        公司新项目使用的是mobx做的状态管理，由于之前没有接触过该技术，临时抱佛脚的看了一下，现在总结一下学习成果，不足之处，望小伙伴们多多指教。

     MobX是什么？

       官方文档是这样介绍的，简单、可扩展的状态管理（Simple, scalable state management）。简单来说，Mobx可以很好的管理应用程序的状态/数据，同时又简单、易扩展。

    常用API介绍

1. observable（可观察的）
   功能：用来观测一个数据。该数据是原始数据类型，但经过observable包装后，就变成了mobx定义的类型。
   用法：@observable count = 0；

2. autorun（自动执行）
   功能：当观测的数据发生变化的时候，如果该变化的值处在autorun中，那么autorun就会自动执行。
   用法：autorun(() => console.log(this.counter));

3. Observer
   功能：c，当可观察数据发生变化时，组件会自动响应，并重新渲染。
   用法：observer(Component)  
             @observer export class HomeContainer extends React.Component {}

4. action（动作）
   功能：用来修改状态。
   用法：@action  addAryItem(item:any){this.ary.push(item)};

5. inject（注入）
   功能：将store注入到props上
   用法：@inject(‘store’);

6. computed（计算）
   功能：根据现有的状态或者其他计算值衍生出的值。
   用法：@computed get todoListLength(){return this.todoList.length;};

     MobX应用

       纸上得来终觉浅，绝知此事要躬行。下面我们来做一个TODOLIST的小案例，消化一下上面的东西。下图是案例的功能，在输入框中输入要做的事情，点击添加按钮，将输入的内容添加到下面的列表中，列表上方的文字，提示总共有多少件事情需要做。该例子很简单没有做内容的修改、待办事情完成标识等。

store文件中的代码如下：

1. todoList：存储待办事情的数组；
2. addAry：往数组中新增数据，即添加待办事情的方法；
3. disposer：autorun方法，当该方法观测的数据发生变化的时候，自动执行该方法；
4. todoListLength：计算数组的长度；

HomeContainer文件中的代码如下：

1. interface中接收的是父组件传递过来的属性；
2. @inject('store')：将store中的数据保存在组件的this.props属性中；
3. observer：将该组件变成响应式组件；

Todo文件中的代码如下：

     常用工具函数

       1、Observe:监听数据的变化（不支持数据的深层监听，可使用spy函数）。

       如下图，当todoList发生变化时，会打印出变化的信息。

       2、spy：监听所有mobx中的事件（深层监听）。

       当我们在输入框中输入数据时，spy函数将会打印出下图所示的内容，当我们添加数据时会执行addAry的action。即所有事件均会打印出来，同时带来一定的性能损耗，所以我们要慎用。

       3、toJS:递归地将一个mobx可观察的数据转换为 javascript 结构。

       如下图，当todoList被observable观测时，会打印出一堆信息，和我们之前所认知的数据格式不太一样，而toJS函数可以将这种数据转换成JavaScript结构的数据。

4、trace：调试方法，帮助我们查找为什么计算值、 reactions 或组件会重新计算。

     MobX VS Redux

       在这个项目之前，我们一直使用的是redux做的状态管理。俗话说的好，‘存在即合理’，那么mobx和redux相比有什么不同呢？让我们一起来看下吧。

       1、开发难度低

       MobX是响应式编程；逻辑相对来说比较简单；采用的是多节点管理数据；而Redux是函数式编程；逻辑相对来说比较复杂；采用的是单节点管理数据；

       2、开发代码量少

       单纯的只有一个待办事情的数组，和增加数组的方法；使用mobx时，只要在store文件中写入下图几行代码即可实现；

       而使用redux时，需要两个文件，分别如下图：

3、渲染性能好

       Mobx是基于可观察数据的属性变化来实现的，而且是多store的，对于任何的数据更新都是第一时间知道的，可以做到对数据的可预测以及细粒度的控制；而Redux是使用唯一的Store，所以任何数据的更改都会通过这一个store来触发整个UI树的重新渲染。

       该博文小编主要介绍了mobx的基础知识和简单的应用，具体深入的东西待小编在实际项目中遇到时在接着分享给大家，敬请期待！