资讯专栏INFORMATION COLUMN

MobX学习之旅

刘福 / 1899人阅读

摘要:一其实是一个比较轻便的可扩展的状态管理工具,是一个由以及一些其他团队的人共同维护的开源项目。当应用公共状态的组件在状态发生变化的时候,会自动完成与状态相关的所有事情,例如自动更新自动缓存数据,自动通知等。

一、MobX
MobX其实是一个比较轻便的可扩展的状态管理工具,是一个由Facebook以及一些其他团队的人共同维护的开源项目。

当应用公共状态的组件在状态发生变化的时候,会自动完成与状态相关的所有事情,例如自动更新View,自动缓存数据,自动通知server等。
例如React的体系,react + redux + react-redux + redux-saga, view层触发一个action,中间件会将这个动作进行dispatch,然后reducer执行相应的更新状态方法,使得store的状态更新。

MobX官方推荐与React搭配使用,来存储和更新应用状态,所以最好搭配mobx-react中间件使用:
原理:
1、React的render是将存储的状态转化为树状结构来渲染组件的方法;
   Mobx是用来存储和更新状态的工具;
2、React使用的方法是采用虚拟Dom来进行view视图的缓存,来减少繁琐的Dom更新
   而Mobx则通过一个虚拟的状态依赖图表来让react组件和应用状态同步化来减少不必要的状态来更新组件的
二、MobX与其他状态管理工具的区别
1、对比Redux
  conponent-->dispatch(action)-->reducer-->subscribe-->getState-->component
  对比React-Redux
  component-->actionCreator(data)-->reducer-->component
这里的reducer在MobX里都给了action,直接通过action来更改状态,不需要reducer来操作state了,也不需关注reducer纯不纯了

2、对比Vuex
component-->dispatch(action)-->mutation--(mutate)-->state-->component
vuex中提出了同步mutation和异步action,现在mobx也无需mutaiton,但借鉴了computed这个纯函数。

相比这两个工具,MobX内置了数据变化监听机制,使得在实际应用的时候一切都是那么的顺其自然。
三、MobX核心模块
MobX的数据驱动解构:
    action--(update)-->state--(update)-->computed--(trigger)-->reaction
    
MobX与decorater语法结合(注解形式@)结合起来用比较优雅,也算是MobX的一大亮点吧!
Observable
是被观察着和观察者的概念,你也可以理解为生产者和消费者的概念
@observable/Observable 方法将对象的所有属性重新克隆成新对象,并将克隆对象转变成可观察的。
@observer就是在你订阅观察的对象的地方添加注释来监听对象的更新

Observable 方法的值可以是如下类型:

1、object(原型是Object): Observable方法将该对象克隆成新对象并将属性转变成可观察的;
但是后添加的属性不会变为可观察的,需要用到set或者extendObservable;

    eg: 
    @observable car = {color: red; name: "Infinity"}
    
    注:这也其实是extendObservable(this,{ car: {color: red; name: "Infinity"} })的语法糖
    向对象中添加属性:
    extendObservable(car, {price: "300w"})

2、Array:Observable会创建一个类数组对象来代替真正的数组,并且支持所有的原生方法,
但是sort和reverse有所不同,这里的被观察的数组对象的这两个方法,是不会改变数组本身,而是一个拷贝的数组;

3、Es6的Map:创建一个动态建的observable映射,可以对特定项的更改做出反应等;会返回一个新的Observable Map

4、object(有自身的原型对象):这种情况需要使用observable.box(value)来管理这样的值
通过box这个箱子来存这些值,并使用.get()用来获取当前值,采用.set(newValue)来更新值。

    eg:
    const carName = observable.box("Infinity");
    console.log(carName.get());
    carName.set("ofo");
Computed
 是在定义相关的一些数据发生变化的时候自动更新的值,通过@computed来修饰使用;
 注意:computed修饰的是一个状态,状态不能重复声明,只有参与计算的值发生改变才会触发computed
 
 例如我需要对数组进行筛选:
 @observable numbersArr = [99, 80, 79, 68, 2, 43, 1, 23];

一、getter
eg:
 // 筛选数组中乘2并大于50的数
  @computed get computedNumbers() {
    return this.numbersArr.filter((item) => {
      return item * 2 > 50;
    }).join(" ");
  }

然后在组件内进行调用:
{this.props.store.computedNumbers}
二、setter set computedBumbers(value) { this.numbersArr = [99, 80, 79, 68, 2, 43, 1, 23]; } // set方式可以使得数据进行逆推导 将数据按照既定的方式进行复原 eg: @observable length = 2; @computed get squared() { return this.length * this.length; } set squared(value) { this.length = Math.sqrt(value); } 注:这与autorun还有点区别,如果有一个函数应该自动运行(例如只是为了达到某种效果/功能),但不会产生一个新的值,那就使用autorun,但是一般这种情况比较少
Action
比起官方说的“动作”,我更愿意称为是“行为”,mobx的action吸收了redux和vuex的数据处理的复杂逻辑
用来修改状态,不同于Computed

eg:
component:
sendInfo = () => {
    const username = this.name.value;
    const pwd = this.pwd.value;

    if (!username || !pwd) {
      return;
    }

    // 调接口
    this.props.testDecStore.handleGetUserInfo();
  };

store:
// 四、异步数据获取
@action handleGetUserInfo() {
    this.sendCount++;
    testDecService.getUserInfo().then((data) => {
      this.userInfo = data;
   })
}
Autorun
这个函数类似computed,是通过对状态的更新做出反应,但是不同于computed。

computed创建的函数,是有自己的观察者的,而autorun是只有它的依赖关系改变时才会重新计算,
否则它的值被认为是不相干的。正如官方所说是比较适合log打印日志,持久化更新UI的代码,而不是用来产生新的值

接收的参数:
1,对象,
2、delay: 函数延迟执行时间,例如节流去抖
3、name: 
4、onError: 用来处理reaction的错误
5、scheduler: 设置自定义调度器以决定如何调度autorun函数的重新运行

eg:
autorun(() => {
    // do something
}, {
    onError(e) {
        alert("error")
    }
})


实例:
autorun(() => {
  this.myname = `my name is ${this.firstName} ${this.lastName}`;
});

changeName = () => {
    this.firstName = `Alice${new Date().getTime()}`;
    this.lastName = `Thomas${new Date().getTime()}`;
 };

测试autorun 开始
{this.myname}
只要firstname和lastname发生变化都会更新dom

但是,如果仅仅想要在被观察的变量有变化的时候触发,而不是立即执行autorun,那么我们可以用到reaction了;

Reaction
Reaction是在初次数据变化后才会触发
四、Mobx-react核心概念 Observer
是mobx-react包多带带提供的

Observer是用来将React组建转变成响应式的组件,内部通过mobx.autorun包装了组件的
render函数,来确保store的数据更新时来刷新组件

@observer 是observer(class ***{})的注解形式,用来观察组件,
高阶组件 @observer class Test extends React.Component{}
无状态组件 const Test = observer(() => 
test
) 使用inject组件连接提供的sotres,他会使得stores可以作为组件的props调用 eg: @inject("testStore") @observer class Test extends React.Component{}
Provider
Provider函数为connect函数提供store参数,本身connect函数就是用来连接视图和数据层的方法。

在跟组件外层包一层provider,使得所有的子组件默认都可以拿到state

使用:

import { Provider } from "mobx-react";
import store from "../stores";


    ...
inject
引入数据的方式,@inject(stores); 使得数据被自动保存在组件的this.props中
componentWillReact
mobx-react新增的生命周期钩子,当组件重新render的时候会被触发,但在初始渲染前是不会被触发的
onError
mobx-react提供的错误钩子函数来收集错误

用法: 

import { onError } from "mobx-react";
onError((error) => {
    consol.log(error);
})
五、MobX源码解读 六、MobX使用注意

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95993.html

相关文章

  • 【译】Redux 还是 Mobx,让我来解决你的困惑!

    摘要:我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的,因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式,但对于大部分开发者来说是新奇的。规模持续增长的应 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...

    txgcwm 评论0 收藏0
  • mobx学习总结

    摘要:原理分析的核心就是通过观察某一个变量,当该变量产生变化时,对应的内的回调函数就会发生变化。回调函数若依赖外部环境,则无法进行收集很好理解,的回调函数在预执行的时候无法到达那一行代码,所以收集不到。 Mobx解决的问题 传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流,数据流完全可控并可追踪。要实现该目标,便需要进行相关的约束。Redux由此引出了dispa...

    roundstones 评论0 收藏0
  • 前端修炼之路

    摘要:一步,两步,三步四步五步,就这样到达了人生的巅峰传统前端生态初级不使用打包中间处理工具,手工处理图片等资源掌握以下知识点基础结构,基础样式,基础语法框架,系列插件框架,等基础插件,等其他移动端适配,浏览器兼容,浏览器调试等恭喜完成新手村修 一步,两步,三步四步五步,就这样到达了人生的巅峰~ 传统前端生态-初级 不使用打包、中间处理工具,手工处理js、css、图片等资源 掌握以下知识点:...

    Jason_Geng 评论0 收藏0
  • 前端修炼之路

    摘要:一步,两步,三步四步五步,就这样到达了人生的巅峰传统前端生态初级不使用打包中间处理工具,手工处理图片等资源掌握以下知识点基础结构,基础样式,基础语法框架,系列插件框架,等基础插件,等其他移动端适配,浏览器兼容,浏览器调试等恭喜完成新手村修 一步,两步,三步四步五步,就这样到达了人生的巅峰~ 传统前端生态-初级 不使用打包、中间处理工具,手工处理js、css、图片等资源 掌握以下知识点:...

    macg0406 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<