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