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