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之后打上勾