react状态管理器之mobx
react有几种状态管理器,今天先来整理一下mobx状态管理器,首先了解一下什么是mobx
可以干嘛:
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的更多相关文章
- React状态管理相关
关于React状态管理的一些想法 我最开始使用React的时候,那个时候版本还比较低(16版本以前),所以状态管理都是靠React自身API去进行管理,但当时最大的问题就是跨组件通信以及状态同步和状态 ...
- 借鉴redux,实现一个react状态管理方案
react状态管理方案有很多,其中最简单的最常用的是redux. redux实现 redux做状态管理,是利用reducer和action实现的state的更新. 如果想要用redux,需要几个步骤 ...
- 纯粹极简的react状态管理组件unstated
简介 unstated是一个极简的状态管理组件 看它的简介:State so simple, it goes without saying 对比 对比redux: 更加灵活(相对的缺点是缺少规则,需要 ...
- Flutter 状态管理- 使用 MobX
文 / Paul Halliday, developer.school 创始人 众所周知,状态管理是每个软件项目都需要持续迭代更新的方向.它并不是一个「一次性」的工作, 而需要不断确保你遵循的最佳实践 ...
- React状态管理之redux
其实和vue对应的vuex都是差不多的东西,这里稍微提一下(安装Redux略过): import { createStore, combineReducers, applyMiddleware } f ...
- React的状态管理工具
Mobx-React : 当前最适合React的状态管理工具 MobX 简单.可扩展的状态管理 MobX 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商 ...
- 状态管理之 Flux、Redux、Vuex、MobX(概念篇)
本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...
- 你再也不用使用 Redux、Mobx、Flux 等状态管理了
Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能.看完这个库的说明后,没有想到代码可以这个玩.短短几行代码,仅仅使用 ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
随机推荐
- java集合源码分析(三):ArrayList
概述 在前文:java集合源码分析(二):List与AbstractList 和 java集合源码分析(一):Collection 与 AbstractCollection 中,我们大致了解了从 Co ...
- cJSON的使用
1 安装cJSON github地址:https://github.com/DaveGamble/cJSON.git 下载完成后进入cJSON目录,执行下面命令生成Makefile文件 mkdir b ...
- mongo聚合操作
1 mongodb的聚合是什么 聚合(aggregate)是基于数据处理的聚合管道,每个文档通过一个由多个阶段(stage)组成的管道,可以对每个阶段的管道进行分组.过滤等功能,然后经过一系列的处理, ...
- 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 ...
- 性能测试学习之路 (四)jmeter 脚本开发实战(JDBC &JMS &接口脚本 & 轻量级接口自动化测试框架)
1.业务级脚本开发 登录脚本->思路:在线程组下新建两个HTTP请求,一个是完成访问登录页,一个是完成登录的数据提交. 步骤如下: 1) 访问登录页 2) 提交登录数据的HTTP PS:对于 ...
- Leetcode学习笔记(6)
题目1 ID112 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节点. 示例: 给定如下二叉树,以及目标 ...
- Mac下查看端口占用情况
为什么 后端开发时,有时会碰到服务无法正常启动,端口被占用.这时需要查看端口占用情况. 是什么 需要用到一些Linux命令. 怎么做 查看占用端口51805的进程 lsof -n -P -i TCP ...
- 使用T4模板动态生成NPoco实体类
这是一个妥妥的NPoco类,这是我们在工作开发中,手动去写这个实体类,属实非常心累,字段少无所谓一次两次,数量多了,字段多了,就心态裂开
- 题解-CTS2019 珍珠
题面 CTS2019 珍珠 有 \(n\) 个在 \([1,d]\) 内的整数,求使可以拿出 \(2m\) 个整数凑成 \(m\) 个相等的整数对的方案数. 数据范围:\(0\le m\le 10^9 ...
- Vue开发中的移动端适配(px转换成vw)
1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced - ...