前端小白初探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
      }
    ]
  ]
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值