###
MobX 使用教程
MobX 是一个强大的状态管理库，能够帮助开发者轻松实现 JavaScript 应用程序中的响应式编程。以下是有关
MobX 的一些重要知识点以及其使用的详细介绍。
#### 1. 基本概念
MobX 提供了一种简单而有效的方法来管理应用的状态变化。它的核心理念基于两个主要的概念：`observable` 和 `
reaction`。
- **Observable**: 表示可观察的数据源，当这些数据发生变化时会
触发相应的反应机制。
- **
Reaction**: 当 observable 数据发生改变时自动执行某些操作或更新 UI[^1]。
#### 2. 安装与初始化
要开始使用
MobX，首先需要安装必要的依赖项。可以通过 npm 或 yarn 来完成安装：
```bash
npm install
mobx mobx-
react
```
对于
React 函数组件的支持，则需额外引入 `
mobx-
react-lite`:
```bash
npm install
mobx-
react-lite
```
如果是在 Vue 中集成
MobX，则可以考虑使用专门的插件包 `vue-
mobx`[^3]:
```bash
npm install vue-
mobx --save
```
#### 3. 创建 Store 并
定义 Observable 属性
Store 是存储应用程序全局状态的地方。下面展示了一个简单的 store 实现方式：
```javascript
import { makeAutoObservable } from "
mobx";
class DataStore {
data = "";
loading = false;
constructor() {
makeAutoObservable(this);
}
fetchData = async () => {
this.loading = true;
try {
const response = await fetch("https://api.example.com/data");
this.data = await response.json();
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
};
}
export default new DataStore();
```
上述代码片段展示了如何通过 `makeAutoObservable` 方法将类实例转化为具有响应性的对象，并提供了异步方法 `fetchData()` 更新状态[^4]。
#### 4. 在
React 组件中使用
MobX
为了使
React 组件能够感知到 state 变化的通知并重新渲染界面，可以借助装饰器或者 Hook 方式连接 store。
##### 装饰器模式（Class Components）
```javascript
import
React, { Component } from "
react";
import { observer } from "
mobx-
react";
import store from "./store";
@observer
class App extends Component {
render() {
return (
<div>
{store.loading ? <p>加载中...</p> : <p>{store.data}</p>}
<button onClick={store.fetchData}>获取数据</button>
</div>
);
}
}
```
##### Hooks 模式（Function Components）
```javascript
import
React from "
react";
import { useObserver } from "
mobx-
react-lite";
import store from "./store";
const App = () => {
return useObserver(() => (
<div>
{store.loading ? <p>加载中...</p> : <p>{store.data}</p>}
<button onClick={store.fetchData}>获取数据</button>
</div>
));
};
export default App;
```
以上两种写法均实现了相同的功能逻辑——即每当 store 内部
变量更改时都会
触发动态刷新视图[^5]。
#### 5. 计算属性与派生值
除了直接暴露原始字段外，还可以利用 computed properties 功能计算衍生出来的只读值。例如统计列表长度等场景非常适用。
```javascript
import { makeAutoObservable, computed } from "
mobx";
class TodoList {
todos = ["吃饭", "睡觉"];
constructor() {
makeAutoObservable(this, {}, { autoBind: true });
}
@computed get todoCount() {
return this.todos.length;
}
addTodo(todoItem) {
this.todos.push(todoItem);
}
}
export default new TodoList();
```
此案例演示了如何声明一个名为 `todoCount` 的计算属性，该属性始终返回当前待办事项的数量[^2]。
---
###
博客指出在React使用Mobx时，若要触发componentwillreact，需在render中使用相关变量，涉及前端开发中框架的交互使用。
扫一扫
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
