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 }>
        <App />
    </Provider>,
    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
    }
}