安装和配置

安装

安装Mobx

yarn add mobx

npm i --save mobx

安装React绑定库，两种选择，mobx-react-lite 仅支持函数组件，mobx-react 还支持基于类的组件。根据个人使用类组件还是函数式组件安装。

yarn add mobx-react-lite
# 或者
yarn add mobx-react

配置

注：如果安装使用了mobx-react-lite，则只支持使用函数式组件，而普通函数是不支持使用装饰器的，因为存在函数提升。想要使用装饰器语法，请使用mobx-react。

未使用Typescript

方式一：

# 安装以下插件
yarn add -D react-app-rewired customize-cra @babel/plugin-proposal-decorators

react-app-rewired用于修改webpack配置项，customize-cra用于重置和引入通过cra创建项目的webapck配置项，@babel/plugin-proposal-decorators用于支持装饰器语法。

安装完成后在项目根目录下创建config-overrides.js文件，并写入以下内容：

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

module.exports = override(
  addDecoratorsLegacy()
  )

修改pakcage.json文件中scripts脚本,启动和构建前置命令从react-scripts更改为react-app-rewired

{
  "scripts":{
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
  }
}

方式二：

1.使用yarn eject释放出webpack文件，注意在释放前请提交一次环境； 2.安装@babel/plugin-proposal-decorators

在package.json中配置plugins属性开启支持装饰器：

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

使用Typescript

ts天生就支持装饰器，但默认并未开启，如果需要使用装饰器则需要在编译配置(compilerOptions)内新增"experimentalDecorators": true属性"useDefineForClassFields": true：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "useDefineForClassFields": true
  }
}

更多Mobx配置注意事项

启用严格模式

在不启用严格模式的情况下，在非action中修改属性值是被允许的，但在控制台可能依然会被提示警告，而开启了严格模式后，在外部修改属性值将报错误提示！

import { configure } from "mobx"

configure({
  enforceActions: 'observed'
})

autorun函数可以监听每一次容器内属性的修改，如果我们直接操作容器实例属性，那么将造成每一次的修改都执行一次autorun，但如果将修改操作放到action中，那么多次修改后只调用一次autorun，这样可以减少不必要的代码执行。

import { makeAutoObservable, autorun } from 'mobx';

class Store {
  count = 0;

  constructor() {
    makeAutoObservable
  }
}