MobX 简介

MobX 介绍

简单，可扩展的状态管理库、与redux作用是一样的，都是通过一个对象去管理应用程序中的状态，与redux相比MobX是及其简单的，没有复杂的工作流程，没有过多的样板代码

MobX 是由 Mendix，Coinbase，Facebook 开源和众多个人赞助商所赞助的、

React 和 MobX是一对强力组合，React 负责渲染应用的状态，MobX负责管理应用状态供React使用

MobX 浏览器支持

MobX 5 版本运行在任何支持 ES6 proxy 的浏览器，不支持IE11 ，Nodejs 6

MobX 4 版本可以运行在任何支持 ES5 的浏览器上

MobX 5 和 MobX 4 的 API 是相同的

开发前的准备

启用装饰器语法支持（方式1）

• (1) 弹射项目底层配置

npm run eject

• (2) 下载装饰器语法 babel 插件

npm install @babel/plugin-proposal-decoratos

• (3) 在 package.json 文件加入配置

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

启用装饰器语法支持（方式2）

• (1) 下载相应的插件

npm install react-app-rewired customize-cra @babel/plugin-proposal-decorators

• (2) 在项目下创建 config-overrides.js 并加入配置

const { override, addDecoratorsLegacy } = require('customize-cra')
module.exports = override(addDecoratorsLegacy())

• (3) package.json

"script": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
        "test": "react-app-rewired test"
}

解决vscode装饰器语法报错

javascript.implicit ProjectConfig.experimentalDecorators: true

设置中搜索key之后打上勾