react有几种状态管理器,今天先来整理一下mobx状态管理器,首先了解一下什么是mobx

  1、mobx成员: observable action

  可以干嘛:

  MobX 的理念是通过观察者模式对数据做出追踪处理,在对可观察属性作出变更或者引用的时候,触发其依赖的监听函数;整体的store注入机制采用react提供的context来进行传递
  

  怎么用: 定义类
  @observable 装饰store类的成员,为被观察者
  @action 实例方法, 修改状态,同步异步都修改,不推荐组件内部改
  用在哪: react
  2、mobx-react成员: inject,observer,Provider
  Provider: 顶层提供store的服务,Provider store={store}
  inject: 注入Provider提供的store到该组件的props中,组件内部使用
  inject 是一个高阶组件 高阶组件返回的是组件,作用在包装组件
  场景: export default inject('store')(react函数式组件)
  @inject 是装饰器,装饰的是类本身和类成员,
  @inject('store') class 类组件
  observer: 设置当前组件为观察者,一旦检测到store中被监测者发生变化就会进行视图的强制刷新
  @observer class 类组件 ..
  const 组件=observer((store)=>{jsx})
 
  说了这么多,到底怎么用呢?不要着急,因为mobx用到了es7语法,编辑器可能会出现解析不了的情况,我们需要先进性配置;
  1、安装依赖
  

cnpm i @babel/plugin-proposal-decorators --save

  2、配置package.json文件,可以crtl + f查找babel。

"babel": {
"presets": [
"react-app"
],
// ++++++++++++++++++++
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}

  3、安装依赖

cnpm i mobx mobx-react -S

  4、在项目的src文件夹下创建store/index.js,我在这里以获取商品列表数据为例

// 引入分模块
import HomeStore from './home';
// 创建仓库
class Store {
constructor () {
this.home = new HomeStore(this);
}
}
export default new Store();

  5、创建组件 分模块 store/home.js

import { observable, action } from 'mobx';
class HomeStore {
constructor (store) {
this.store = store
this.getProlist = this.getProlist.bind(this);
}
// 初始的状态
@observable prolist = [1, 2, 3] // 函数
@action
getProlist () {
// 异步操作,我在这里就不去请求接口了,自己模拟一下
this.prolist = [4, 5, 6]
}
} export default HomeStore;

 6、在入口文件index.js中引入store,并引入Provider监控状态是否改变

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'mobx-react'; // 引入Provider
import store from './store'; // 引入store ReactDOM.render(
<Provider store = { store }> // 传参
<App />
</Provider>,
document.getElementById('root')); serviceWorker.unregister();

  7、创建组件views/home/index.jsx

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react'; // 依赖注入 + 观察者
@inject('store')
@observer
class Com extends Component {
// 获取状态 this.props.store.home.prolist
// 获取函数 this.props.store.home.getProlist
render () {
let { store: { home: { prolist, getProlist }}} = this.props
return (
<div>
<button onClick={ () => {
getProlist()
}}>change</button>
{
prolist.map((item, index) => {
return <p key={ index }>{item}</p>
})
}
</div>
)
}
} export default Com;

  如此,就实现了mobx状态管理器了。

  

react状态管理器之mobx的更多相关文章

  1. React状态管理相关

    关于React状态管理的一些想法 我最开始使用React的时候,那个时候版本还比较低(16版本以前),所以状态管理都是靠React自身API去进行管理,但当时最大的问题就是跨组件通信以及状态同步和状态 ...

  2. 借鉴redux,实现一个react状态管理方案

    react状态管理方案有很多,其中最简单的最常用的是redux. redux实现 redux做状态管理,是利用reducer和action实现的state的更新. 如果想要用redux,需要几个步骤 ...

  3. 纯粹极简的react状态管理组件unstated

    简介 unstated是一个极简的状态管理组件 看它的简介:State so simple, it goes without saying 对比 对比redux: 更加灵活(相对的缺点是缺少规则,需要 ...

  4. Flutter 状态管理- 使用 MobX

    文 / Paul Halliday, developer.school 创始人 众所周知,状态管理是每个软件项目都需要持续迭代更新的方向.它并不是一个「一次性」的工作, 而需要不断确保你遵循的最佳实践 ...

  5. React状态管理之redux

    其实和vue对应的vuex都是差不多的东西,这里稍微提一下(安装Redux略过): import { createStore, combineReducers, applyMiddleware } f ...

  6. React的状态管理工具

    Mobx-React : 当前最适合React的状态管理工具   MobX 简单.可扩展的状态管理        MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商 ...

  7. 状态管理之 Flux、Redux、Vuex、MobX(概念篇)

    本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...

  8. 你再也不用使用 Redux、Mobx、Flux 等状态管理了

    Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能.看完这个库的说明后,没有想到代码可以这个玩.短短几行代码,仅仅使用 ...

  9. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

随机推荐

  1. 老猿学5G扫盲贴:中国移动网络侧CHF主要功能及计费处理的主要过程

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

  2. 第14.13节 BeautifulSoup的其他功能导览

    前面<第14.9节 Python中使用urllib.request+BeautifulSoup获取url访问的基本信息 >.<第14.10节 Python中使用BeautifulSo ...

  3. 性能测试学习之路 (一)认识jmeter(性能测试流程 && 性能测试通过标准 &&jmeter体系结构)

    性能测试是通过自动化的测试工具模拟多种正常.峰值以及异常负载条件来对系统的各项性能指标进行测试. 1 性能测试技能树 性能测试是一项综合性的工作,致力于暴露性能问题,评估系统性能趋势.性能测试工作实质 ...

  4. Leetcode学习笔记(2)

    题目1 ID面试题 01.04 给定一个字符串,编写一个函数判定其是否为某个回文串的排列之一. 回文串是指正反两个方向都一样的单词或短语.排列是指字母的重新排列. 回文串不一定是字典当中的单词. 示例 ...

  5. let和var变量的思考

    刚学JavaScript,纠结全局变量用var 还是 let. 这篇文章[来源于知乎]表示 在定义全局变量时,var 和 let 的作用相同. 那么现在基本遵守ES6规范的前提下,函数变量还是for循 ...

  6. JVM命令手册

    原文链接:https://blog.csdn.net/qq_41345773/article/details/93895532 aconst_null 将null对象引用压入栈iconst_m1 将i ...

  7. 工作笔记——CPLD与MCU通过SPI通信

    一.需求描述 MCU需要接收来自CPLD的升级固件数据 CPLD对MCU只进行发送数据,不接收MCU的数据 CPLD无法告知数据传输的开始和结束,需要MCU自行判断(CPLD只是数据透传,不做数据判断 ...

  8. PluginOK中间件高级版-支持在Chrome、Edge、Firefox等浏览器网页中真正内嵌ActiveX等控件运行的版本已获多家上市公司采购

    PluginOK(牛插)中间件(原名:本网通WebRunLocal)是一个实现WEB浏览器(Web Browser)与本地程序(Local Application)之间进行双向调用的低成本.强兼容.安 ...

  9. .net core 和 WPF 开发升讯威在线客服与营销系统:背景和产品介绍

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf-m.shengxunwei.com ...

  10. 九、TestNG超时测试

    "超时"表示如果单元测试花费的时间超过指定的毫秒数,那么TestNG将会中止它并将其标记为失败. 使用属性 timeOut = 参数(1s*1000) package com.lc ...