mobx工作原理

奔跑音符

已于 2023-01-06 13:56:06 修改

阅读量500

点赞数 2

文章标签： javascript 前端

于 2023-01-03 10:22:02 首次发布

本文链接：https://blog.csdn.net/weixin_43760641/article/details/128528458

版权

mobx是什么？

mobx是一个简单可扩展的状态管理库

mobx相对于redux有哪些优势？

- 开发难度低
- 开发代码量少
- 渲染性能好

mobx vs resux

编程范式不同：
- redux：函数式编程
  - 函数是一等公民使用函数表达式
  - 不可变数据纯函数, 函数组合,高阶函数，函数柯理化等都是函数式编程中的概念。
- mobx: 面向对象
内存开销
- redux: 不可变数据需要用到拷贝去生成新的对象支持数据回溯内存开销大
- mobx: 状态可变 mobx始终使用一份引用内存开销较小
应用性能
- mobx：性能好当我们访问某个属性的时候有一个收集依赖的过程，
- 一旦值发生变化mobx可以精确观察更新每一个状态，然后再去渲染对应的组件
- redux: 派发动作通过纯函数reducer修改数据全局状态变更
- 通过高阶函数Provider和connent进行数据分发将状态映射为每个组件的属性
仓库设计模式
- mobx：每个组件或者页面都可以有自己对应的仓库实例
- redux: 单利模式，全局有一个仓库单向数据流流向清晰
处理异步问题
- mobx: 使用async和await函数处理异步问题
- redux：使用中间件去扩展dispatch来进行异步操作,常用的中间件redux-thunk，redux-sagas

mobx核心思想

原理

状态变化引起的副作用应该被自动触发
应用逻辑只需要修改状态数据即可,mobx回自动渲染UI，无需人工干预
数据变化只会渲染对应的组件
MobX提供机制来存储和更新应用状态供 React 使用
通过提供机制把应用状态转换为可渲染组件树并对其进行渲染

技术选型

mobx内部使用es6代理 Proxy
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身

const proxy = new Proxy(target, handler);
let p1=new Proxy({name:'奔跑音符'},{
    get: function (target,key,receiver) {
        console.log(`getting ${key}`);
        console.log(receiver);
        return Reflect.get(target,key,receiver);
    },
    set: function (target,key,value,receiver) {
        console.log(`setting ${key}`);
        return Reflect.set(target,key,value,receiver);
    }
});
console.log(p1.name);

简单使用

observable
- MobX为现有的数据结构(如对象，数组和类实例)添加了可观察的功能。
- observable就是一种让数据的变化可以被观察的方法
- 先把数据转化成可以被观察的对象，那么对这些数据的修改就可以备监视

const {observable,isArrayLike}=require('mobx');
function observable2(target) {
    return new Proxy(target,{});
}
const p1=observable2({name:'奔跑音符'});
console.log(p1.name);

const {observable}=require('mobx');
function observable2(target) {
    return new Proxy(target,{

    });
}
const p1=observable([1,2,3]);
p1.push(4);
p1.pop();
console.log(p1);
console.log(Array.isArray(p1));

autorun
- 如果使用修饰器模式，则不能再用observe方法了
- 当你想创建一个响应式函数，而该函数本身永远不会有观察者时,可以使用 mobx.autorun
- 当使用 autorun 时，所提供的函数总是立即被触发一次，然后每次它的依赖关系改变时会再次被触发
- 数据渲染后自动渲染

```autorun(() => {
    //console.log(store.province,store.city);
    console.log(store.home);
});

store.province='山东';
store.city='济南';

computed
- 计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值
- 组合已有的可观察数据，成为新的可观察数据
- 既是反应又是可观察数据
- 可以作为函数使用也可以作为decorator使用
- 使用 .get() 来获取计算的当前值
- 使用 .observe(callback) 来观察值的改变。


let {observable,computed} = require('mobx');
class Store {
    @observable name='benpaoyinfu';
    @observable age=9;
    @observable area='010';
    @observable number="18910092296"

    @observable province="广东";
    @observable city="东莞";
    @computed get home() {
        return this.province+this.city;
    }
}

let store=new Store();
let cell = computed(function () {
    return store.area+'-'+store.number;
});
cell.observe(change=>console.log(change));
console.log(cell.get());
store.area='020';
store.number='15718856132';
console.log(cell.get());
console.log(store.home);
store.province='山东';
store.city='济南';
console.log(store.home);