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. java集合源码分析(三):ArrayList

    概述 在前文:java集合源码分析(二):List与AbstractList 和 java集合源码分析(一):Collection 与 AbstractCollection 中,我们大致了解了从 Co ...

  2. cJSON的使用

    1 安装cJSON github地址:https://github.com/DaveGamble/cJSON.git 下载完成后进入cJSON目录,执行下面命令生成Makefile文件 mkdir b ...

  3. mongo聚合操作

    1 mongodb的聚合是什么 聚合(aggregate)是基于数据处理的聚合管道,每个文档通过一个由多个阶段(stage)组成的管道,可以对每个阶段的管道进行分组.过滤等功能,然后经过一系列的处理, ...

  4. moviepy AudioClip帧处理ValueError: The truth value of array with more than one element is ambiguous

    ☞ ░ 前往老猿Python博文目录 ░ 一.环境 操作系统:win7 64位 moviepy:1.0.3 numpy:1.19.0 Python:3.7.2 二.应用代码及报错信息 程序代码 if ...

  5. 性能测试学习之路 (四)jmeter 脚本开发实战(JDBC &JMS &接口脚本 & 轻量级接口自动化测试框架)

    1.业务级脚本开发 登录脚本->思路:在线程组下新建两个HTTP请求,一个是完成访问登录页,一个是完成登录的数据提交.   步骤如下: 1) 访问登录页 2) 提交登录数据的HTTP PS:对于 ...

  6. Leetcode学习笔记(6)

    题目1 ID112 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标 ...

  7. Mac下查看端口占用情况

    为什么 后端开发时,有时会碰到服务无法正常启动,端口被占用.这时需要查看端口占用情况. 是什么 需要用到一些Linux命令. 怎么做 查看占用端口51805的进程 lsof -n -P -i TCP ...

  8. 使用T4模板动态生成NPoco实体类

    这是一个妥妥的NPoco类,这是我们在工作开发中,手动去写这个实体类,属实非常心累,字段少无所谓一次两次,数量多了,字段多了,就心态裂开

  9. 题解-CTS2019 珍珠

    题面 CTS2019 珍珠 有 \(n\) 个在 \([1,d]\) 内的整数,求使可以拿出 \(2m\) 个整数凑成 \(m\) 个相等的整数对的方案数. 数据范围:\(0\le m\le 10^9 ...

  10. Vue开发中的移动端适配(px转换成vw)

    1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced - ...