react+mobx状态管理器

react +mobx

react + react-dom + react-router-dom + axios/fetch + mobx/mobx-react + antd-mobile/antd/element-ui + prop-types

1 装饰器(Decorator) es7 语法
底层原理(是什么):
是个函数,用来装饰类|类成员
是个语法糖(Object.defineProperty)
Object.defineProperty(参数): 给对象添加或修改属性的
参数: target目标 prop针对的属性 descriptor针对目标的描述
如何实现(怎么用):
@装饰器名 类
@装饰器名 类的实例属性|静态属性
@装饰器名 类的实例方法|静态方法
使用场景(用在哪)
mobx / angluar +Ts

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

构建
程序主入口:<Provider store={store}>所有</.>
store: export default 实例store
构造器: this.childStore=new ChildStore(this) this=store
childStore:
构造器: this.store=store 便于任何子store可以访问其他子store
@observable 实例属性
@action 实例方法(){修改实例属性==redux reducer+action}

cnpm i mobx mobx-react -S
cnpm i @babel/plugin-proposal-decorators --save
配置：package.json

babel: {
"presets":...

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

....

}
store/index.js

src/index.js

store/HomeStore.js --- 处理首页中的状态管理
store/KindStore.js

store/index.js 处引入 各个分 模块的状态库

store/HomeStore.js store/kindStore.js的构造器 说明store

store/HomeStore.js ---设计首页的状态以及改变状态的方式

改造src/views/home（kind/cart/user）组件

把当前的首页的这个类组件变为观察者 home/index.jsx

请求数据home/index.jsx

store/homeStore.js中给事件绑定this

首页渲染数据 home/index.jsx

假设你在分类页面需要访问列表的数据