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.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);
- mobx-react
- mobx-react 核心是将render方法包装为autorun
- 谁用到了可观察属性，就需要被observer修饰，按需渲染
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
