一. Mobx5简介+准备工作

Mobx5 学习进阶

项目代码

https://github.com/dL-hx/react-redux-guide

Mobx官网: https://www.mobxjs.com/

简单可扩展的状态管理

• 1. Mobx简介

  背景,浏览器兼容性

• 2. 开发前的准备

  如何支持装饰器语法.

• 3. Mobx+React

  如何结合使用

• 4. Mobx异步

  异步更新本地状态

• 5. Mobx数据监测

  数据检测方法

• 6. 综合案例

一 Mobx简介

1.1 Mobx介绍

状态管理库

推荐(Mobx5)-------- 支持ES6proxy浏览器, 不支持IE11,Node6

(Mobx4)-------- 支持ES5浏览器

让状态容易维护

2 准备工作

v1.0
mobx项目搭建

creact-react-app 创建项目

2.1 启用装饰器语法支持(方式1)

1. 弹射项目底层配置: npm run eject
2. 下载装饰器语法babel 插件: npm install @babel/plugin-proposal-decorators -D
3. 在package.json 文件中加入配置

"babel":{
	"plugins": [
    // ["import", {
    //   "libraryName": "antd",
    //   "libraryDirectory": "es",
    //   "style": "css" // `style: true` 会加载 less 文件
    // }],

    // ↓这里支持装饰器语法配置
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
   
  ]
}

相当于 => 在.babelrc文件加入配置

{
  "presets": [ // 预设,用来加载代码配置
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  "plugins": [// [导入的插件]
    // ["import", {
    //   "libraryName": "antd",
    //   "libraryDirectory": "es",
    //   "style": "css" // `style: true` 会加载 less 文件
    // }],

    // ↓这里支持装饰器语法配置
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
   
  ]
}

2.2 启用装饰器语法支持(方式2)

1. npm install react-app-rewired customize-cra @babel/plugin-proposal-decorators --save-dev
2. 在项目根目录下创建 `config-overrides.js` 并加入如下配置

–save 和 --save-dev 的作用和区别:

https://blog.csdn.net/cvper/article/details/88728505

--save-dev  => 等价于 -D  加入的工具,开发时候用

--save => 等价于 -S , 项目运行的必要文件

config-overrides.js

const { override, addDecoratorsLegacy } = require("customize-cra");
const path = require("path");

module.exports = override(

  addDecoratorsLegacy()  
   
); 

完整配置less版本

npm install antd
npm install react-app-rewired customize-cra babel-plugin-import
npm install less less-loader

const { override, fixBabelImports, addLessLoader, addWebpackAlias, addDecoratorsLegacy } = require("customize-cra");
const path = require("path");

module.exports = override(
  // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)  
  fixBabelImports("import", {    
    libraryName: "antd",    
    libraryDirectory: "es",    
    style: true, //自动打包相关的样式 默认为 style:'css'  
  }),
  // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题  
  addLessLoader({  
    javascriptEnabled: true,    
    modifyVars: { "@primary-color": "#1DA57A" },  
  }),
  //增加路径别名的处理 
  addWebpackAlias({  
    '@': path.resolve('./src')  
  }),
  // 增加装饰器支持  
  addDecoratorsLegacy() 
); 

最后修改启动配置package.json

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

最后运行 npm start , 看到项目已经启动成功

相关阅读:

https://juejin.cn/post/6873725957673320461

https://www.jianshu.com/p/a3609201b6cf

最新版本参照:
Mobx6
https://blog.csdn.net/weixin_38245947/article/details/120338996