一、什么是MobX
MobX 是一个状态管理库,它可以让你轻松地管理应用程序的状态,并且可以扩展和维护。它使用观察者模式来自动传播你的状态的变化到你的 React 组件。
二、安装及配置
- 安装 MobX 和 MobX-React:你可以使用 npm 或 yarn 安装这些库:
bash
npm install mobx mobx-react-lite
# 或者
yarn add mobx mobx-react-lite
- 定义一个 Store :Store 是一个保存应用程序状态的对象。你可以使用 MobX 的
observable
装饰器来使 Store 的属性可观察。这里是一个例子:
javascript
import { observable, action } from 'mobx';
import axios from 'axios';
class Store {
@observable data = null;
@observable loading = false;
@action
async fetchData() {
this.loading = true;
try {
const response = await axios.get('https://api.example.com/data');
this.data = response.data;
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
}
}
const store = new Store();
export default store;
在这个例子中,fetchData
是一个异步的 action,它从 API 获取数据并将其存储在 data
可观察对象中。loading
可观察对象用于跟踪请求是否正在进行中。
三、在组件中使用
3.1 在class组件中使用
js
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import store from './store';
@observer
class MyComponent extends Component {
render() {
return (
<div>
{store.loading ? <p>加载中...</p> : <p>{store.data}</p>}
<button onClick={() => store.fetchData()}>获取数据</button>
</div>
);
}
}
export default MyComponent;
在这个例子中,@observer 装饰器被用来使组件在 loading 或 data 改变时重新渲染。当按钮被点击时,fetchData action 被调用。
3.1 在函数式组件中使用
javascript
import React from 'react';
import { useObserver } from 'mobx-react-lite';
import store from './store';
const MyComponent = () => {
return useObserver(() => (
<div>
{store.loading ? <p>加载中...</p> : <p>{store.data}</p>}
<button onClick={() => store.fetchData()}>获取数据</button>
</div>
));
};
export default MyComponent;
在这个例子中,useObserver
钩子被用来使组件在 loading
或 data
改变时重新渲染。当按钮被点击时,fetchData
action 被调用。
更多细节参考中文文档:https://cn.mobx.js.org/