mobx--react状态管理器

toJS

  • 将一个(observable)对象转换为 javascript 结构

observable和autorun

import { observable, autorun } from 'mobx';

const value = observable(0);
const number = observable(100);

autorun(() => {
  console.log(value.get());
});

value.set(1);
value.set(2);
number.set(101);

<!-- 依次输出 0-初始化设置 1-set一 2-set二 -->
只有当变化的值处于autorun中时,autorun中的函数会自动执行

computer

const number = observable(10);
const plus = computed(() => number.get() > 0);

autorun(() => {
  console.log(plus.get());
});

number.set(-19);
number.set(-1);   //plus值仍为false 未发生变化  不会出发autorun函数
number.set(1);
<!-- 依次输出 true-初始化plus变量的值变为true(10>0)、false-变为false(-19>0)、true(1>0)   只有当autorun中观测的数据发生变化时才会出发autorun函数的执行-->

const price = observable(199);
const number = observable(15);

//computed的其它简单例子
const allPrice = computed(() => price.get() * number.get());  //对初始数据进行处理  单价*数量  获取到价格(需要的数据)
//顺便一提,computed属性和React Native中的ListView搭配使用很愉快。

action,runInAction和严格模式(useStrict)

// mobx推荐将修改被观测变量的行为放在action中。
// 来看看以下例子:

import {observable, action} from 'mobx';
class Store {
  @observable number = 0;
  @action add = () => {
    this.number++;
  
}

const newStore = new Store();
newStore.add();

项目使用

  • 接口
    // 注入store中的
    @inject("xxx")  //引入  xxx.js
    @observer
        // 声明可观察变量、状态,只有变量至于可观察状态时才会监听到数据的变化
        @observer a=false;
        // 改变状态
        @action issuePopupfun = () => {
            this.issuePopup = false
        }
        // 异步转同步 **异步操作加action 建议对任何修改 observables 或具有副作用的函数使用 (@)action **   =>runInAction 是个简单的工具函数,它接收代码块并在(异步的)动作中执行。这对于即时创建和执行动作非常有用,例如在异步过程中。runInAction(f) 是 action(f)() 的语法糖   ??????
        @action CtlPicData = async () => {
        // get请求   
        const { isError, data } = await api.get(
            `${reqPrefix}/api/signals/CtlPicData`,
            {
                // 传递的参数
                areaCode,
                adcode
            }
        )
        // 不存在错误的情况下
        if (!isError) {
            runInAction(() => {
                // 改变状态
                this.statistics_datas.contrast_data3=data.CtlPicData;
            
            })
        }
    }

    // 接收对应store中,需要使用的函数
    const{ store }=this.props.xxx;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文首发于:CSDN「前端开发者说」公众号。CSDN「前端开发者说」公众号(ID:bigfrontend),专注前...
    RachelQG阅读 10,253评论 2 20
  • 我从去年开始使用 RxJava ,到现在一年多了。今年加入了 Flipboard 后,看到 Flipboard 的...
    huqj阅读 5,864评论 0 21
  • Mobx是一个功能强大,上手非常容易的状态管理工具。就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可...
    绯色流火阅读 122,348评论 51 170
  • 转一篇文章 原地址:http://gank.io/post/560e15be2dca930e00da1083 前言...
    jack_hong阅读 4,464评论 0 2
  • 在正文开始之前的最后,放上 GitHub 链接和引入依赖的 gradle 代码: Github:https://g...
    CHSmile阅读 5,485评论 0 10

友情链接更多精彩内容