Mobx5 学习进阶

文章目录

Mobx5 学习进阶
- 一 Mobx简介

项目代码

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

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

简单可扩展的状态管理

1. Mobx简介
背景,浏览器兼容性
1. 开发前的准备
如何支持装饰器语法.
1. Mobx+React
如何结合使用
1. Mobx异步
异步更新本地状态
1. Mobx数据监测
数据检测方法
1. 综合案例

一 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"
  },