react状态管理器之mobx

1、回顾
高阶组件、diff算法、虚拟DOM、非受控组件

2、react状态管理器之 mobx
vue全家桶：vue-cli + vue + vue-router + axios/fetch + vuex + vant / mint-ui / element-ui / iview + scss/less/css/stylus + .....

react全家桶: create-react-app + react + react-dom + react-router-dom + axios/fetch + (redux + redux-thunk + react-redux) + antd / antd-mobile + prop-types + ......

react全家桶: create-react-app + react + react-dom + react-router-dom + axios/fetch + (mobx + mobx-react) + antd / antd-mobile + prop-types + ......

2.1 装饰器(Decorator) es7 语法
是个函数,用来装饰类|类成员

是个语法糖(Object.defineProperty)

Object.defineProperty(参数): 给对象添加或修改属性的

参数: target目标 prop针对的属性 descriptor针对目标的描述

如何实现(怎么用):

@装饰器名

@装饰器名类的实例属性|静态属性

@装饰器名类的实例方法|静态方法

使用场景(用在哪)

mobx / angluar +Ts

2.2 配置
安装：npm i @babel/plugin-proposal-decorators --save

配置：package.json

babel: {
"presets":...

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

....
}
配置： vscode->设置->搜索设置输入：experimentalDecorators->勾上 webstrom 无需设置

3 mobx成员: observable action

干嘛的:MobX 的理念是通过观察者模式对数据做出追踪处理，在对可观察属性作出变更或者引用的时候，触发其依赖的监听函数

整体的store注入机制采用react提供的context来进行传递

怎么用: 定义类

@observable 装饰store类的成员，为被观察者

@action 实例方法, 修改状态，同步异步都修改，不推荐组件内部改

用在哪: react

4 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})

3/mobx 思路
3.1 安装模块
cnpm i mobx mobx-react -S

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

3.2 修改package.json文件
"babel": {
"presets": [
"react-app"
],
// ++++++++++++++++++++
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
3.3 src/store/index.js
class Store {

}
export default new Store()
3.4 入口页面处引入store
import { Provider } from 'mobx-react'
import store from './store'

reactDOM.render(
<Provider store = { store }>

,
document.getElementById('root')
)
3.5 store/home.js 代表首页需要的状态
class HomeStore {
constructor(store) {
this.store = store
}
}
export default HomeStore
同时编写分类状态

class KindStore {
constructor(store) {
this.store = store
}
}
export default KindStore
3.6 store/index.js引入分模块
import HomeStore from './home'
import KindStore from './kind'

class Store {
this.home = new HomeStore(this)
this.kind = new KindStore(this)
}
export default new Store()
3.7 设置初始状态以及函数 store/home.js
// observable 状态
// action 函数
import {observable, action} from 'mobx'
class HomeStore {
constructor(store) {
this.store = store
this.getBannerlist = this.getBannerlist.bind(this)
}
// 初始状态
@observable bannerlist: [1,2,3]
@observable prolist: []

// 函数
@action
getBannerlist() {
    this.bannerlist = [4, 5, 6]
}

}
export default HomeStore
3.8 组件内部使用状态 src/index.js
import { observer, inject} from 'mobx-react';

// 依赖注入 + 观察者
@inject('store')
@observer
class Com extends React.Component {
// 获取状态 this.props.store.home.bannerlist
// 函数 this.props.store.home.getBannerlist
render () {
let { store: { home: {bannerlist, getBannerlist }}} = this.props
}
}

react状态管理器之mobx

猜你喜欢