MobX安装 #

安装依赖 #

创建React项目 #

如果你还没有 React 项目，可以使用 Vite 创建：

bash

# 使用 Vite 创建 React 项目
npm create vite@latest my-app -- --template react

# 进入项目目录
cd my-app

# 安装依赖
npm install

安装MobX #

根据你的项目类型，安装相应的包：

函数组件（推荐） #

bash

npm install mobx mobx-react-lite

类组件 #

bash

npm install mobx mobx-react

TypeScript支持 #

如果你使用 TypeScript，MobX 自带类型定义，无需额外安装：

bash

# 创建 TypeScript 项目
npm create vite@latest my-app -- --template react-ts

# 安装 MobX
npm install mobx mobx-react-lite

项目配置 #

配置装饰器（可选） #

如果你想使用装饰器语法，需要进行额外配置：

1. 安装Babel插件 #

bash

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

2. 配置babel.config.js #

javascript

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
};

3. tsconfig.json（TypeScript项目） #

json

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

验证安装 #

创建一个简单的示例来验证安装是否成功：

创建Store #

javascript

// src/stores/CounterStore.js
import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

export default new CounterStore();

创建组件 #

jsx

// src/components/Counter.jsx
import { observer } from 'mobx-react-lite';
import counterStore from '../stores/CounterStore';

const Counter = observer(() => {
  return (
    <div>
      <h2>Counter: {counterStore.count}</h2>
      <button onClick={() => counterStore.increment()}>+1</button>
      <button onClick={() => counterStore.decrement()}>-1</button>
    </div>
  );
});

export default Counter;

使用组件 #

jsx

// src/App.jsx
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <h1>MobX Demo</h1>
      <Counter />
    </div>
  );
}

export default App;

项目结构建议 #

text

src/
├── stores/              # MobX stores
│   ├── index.js        # 导出所有 stores
│   ├── CounterStore.js # 计数器 store
│   └── UserStore.js    # 用户 store
├── components/          # React 组件
│   └── Counter.jsx
├── App.jsx
└── main.jsx

开发工具 #

MobX DevTools #

安装浏览器扩展来调试 MobX：

bash

# Chrome 扩展
# 搜索 "MobX DevTools" 并安装

在代码中启用调试：

javascript

import { enableLogging } from 'mobx-logger';

enableLogging();

配置选项 #

MobX 提供了一些全局配置选项：

javascript

import { configure } from 'mobx';

configure({
  enforceActions: 'always',  // 强制通过 action 修改状态
  computedRequiresReaction: true,  // 禁止在 reaction 外访问 computed
  reactionScheduler: (f) => f()  // 自定义调度器
});

常见问题 #

1. 装饰器语法问题 #

问题：装饰器语法不生效

解决：确保正确配置 Babel 或 TypeScript，或使用 makeAutoObservable 替代：

javascript

// 装饰器语法
class Store {
  @observable count = 0;
  @action increment() { this.count++; }
}

// 推荐语法
class Store {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }
  increment() { this.count++; }
}

2. 版本兼容性 #

确保使用兼容的版本：

json

{
  "dependencies": {
    "mobx": "^6.0.0",
    "mobx-react-lite": "^4.0.0"
  }
}

3. React 18兼容性 #

MobX 6 完全兼容 React 18：

jsx

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

完整示例 #

package.json #

json

{
  "name": "mobx-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "mobx": "^6.12.0",
    "mobx-react-lite": "^4.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.0",
    "vite": "^5.0.0"
  }
}

vite.config.js #

javascript

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()]
});

总结 #

安装 MobX 非常简单，只需要几个步骤：

创建 React 项目（推荐使用 Vite）
安装 mobx 和 mobx-react-lite
创建 Store 并使用 makeAutoObservable
使用 observer 包装组件

继续学习核心概念，深入了解 MobX 的三大核心概念。