前端小白初探Mobx，记录mobx理解过程

mobx是一个状态管理器，那么说到mobx那肯定先联想到redux，那么先来简单回顾一下redux的内容

redux

store

store是存储数据的地方，redux提供createStore函数，用来生成store存储数据。

import { createStore } from 'redux';
const store = createStore(fn);

action

action可以理解为一个动作，用户在view触发的操作通过action影响到state。type就是用户要触发什么样的操作，而payload则是这个动作需要携带的值。

const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo('Learn Redux');

store.dispatch()是 View 发出 Action 的唯一方法。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

store.dispatch(addTodo('Learn Redux'));

reducer

当view触发了一个action之后，这个action需要去执行一个操作改变state的值，那么改变state值的地方就发生在reducer里面。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

const reducer = function (state, action) {
  // ...
  return new_state;
};

reducer需要结合action来判断具体如何改变state，action中的type相当于是一个具体的执行命令，在reducer里面对type进行判断之后，具体去处理这个action应该如何改变state的值。

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

store.dispatch方法会触发 Reducer 的自动执行。所以需要将reducer跟store绑定一下。

import { createStore } from 'redux';
const store = createStore(reducer);

但是注意reducer必须是一个纯函数，所以返回值应该是一个新对象return { ...state, ...newState };

mobx

与redux不同的是，mbox是基于面向对象的编程范式，而redux是函数式的。

observer

@observer会做一些优化，避免繁琐的更新render

observable

state可以通过observable方法，使得state可观察。通常支持被observable的类型有三个，分别是Object, Array, Map

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const obArray = observable([1, 2, 3]);

computed

假如一个值依赖于另一个state，并且这个值也需要被obserable，那么可以用computed。通常应该尽可能的使用计算属性，并且由于其函数式的特点，可以最大化优化性能。如果计算属性依赖的state没改变，或者该计算值没有被其他计算值或响应（reaction）使用，computed便不会运行。在这种情况下，computed处于暂停状态，此时若该计算属性不再被observable。那么其便会被Mobx垃圾回收。

来自官网： 不要把 computed 和 autorun 搞混。它们都是响应式调用的表达式，但是，如果你想响应式的产生一个可以被其它 observer 使用的值，请使用 @computed，如果你不想产生一个新值，而想要达到一个效果，请使用 autorun。 举例来说，效果是像打印日志、发起网络请求等这样命令式的副作用。

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
var sum = computed(() => numbers.length);
autorun(() => console.log(sum.get()));
// 输出 '3'
numbers.push(4);
// 输出 '4'
numbers[0] = 1;

action

任何应用都有动作。动作是任何用来修改状态的东西。 使用MobX你可以在代码中显式地标记出动作所在的位置。 动作可以有助于更好的组织代码。

装饰器记得babel配置一下

"plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]