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. 「刷题笔记」LCA问题相关

    板子 ll lg[40]; ll dep[N],fa[N][40]; ll dis[N]; void dfs(ll u,ll f) { dep[u]=dep[f]+1; fa[u][0]=f; for ...

  2. PyQt(Python+Qt)学习随笔:树型部件QTreeWidget中使用sortItems进行项排序

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的项可以使用sortItems方法按照指定列进行排序,调用语法: s ...

  3. PyQt(Python+Qt)学习随笔:QTreeWidgetItem项中列数据的访问方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的QTreeWidgetItem项中可以有多列数据,每列数据可以根据 ...

  4. PyQt学习随笔:使用QPropertyAnimation开发简单动画

    QPropertyAnimation是PyQt5.QtCore模块提供的动画设计类,使用该类可以针对PyQt的界面对象进行动画播放,如果要针对一个指定对象进行动画播放,包括如下步骤: 一.创建动画对象 ...

  5. [RoarCTF2019]黄金6年

    嘶吼CTF的杂项题 这道题目比较简单 下载之后是一个mp4文件,黄金六年,害,亲爱的热爱的里面的梗 使用010 Editor打开视频文件,发现最下面有base64编码 UmFyIRoHAQAzkrXl ...

  6. Linux 挂载,卸载光盘

    首先我们点击虚拟机 点击设置 选择CD 接着我们将设备状态两个勾都勾选,并且ISO映像文件选择我们需要挂载的光盘 点击了确定之后,我们到centos7的命令行下 1,创建挂载目录 mkdir /mnt ...

  7. neo4j数据库数据转移,从阿里云转移到windows服务器

    1.从阿里云迁移neo4j时需停掉neo4j数据库,在neo4j的bin目录下输入 ./neo4j stop 2.将数据备份到一个文件中 ./neo4j-admin dump --database=g ...

  8. BJOI2017 机动训练

    落谷.Loj. Description 定义机动路径为: 没有自环 路径至少包含两个格子 从起点开始每一步都向不远离终点的方向移动 相同地形序列指路径上顺序经过的地形序列. 定义机动路径的权值为相同地 ...

  9. 我对js数据类型的理解和深浅(copy)的应用场景

    本人毕业一所专科院校,所学专业是计算机应用技术,在大学时对前端有了一定的了解之后,觉得自己对前端的兴趣十分强烈,开始自学前端,一路上也是坎坎坷坷,也有想要放弃的时候,还好坚持了下来,并且从事前端开发已 ...

  10. Java安全之原生readObject方法解读

    Java安全之原生readObject方法解读 0x00 前言 在上篇文章分析shiro中,遇到了Shiro重写了ObjectInputStream的resolveClass导致的一些基于Invoke ...