MobX入门指南:快速上手状态管理库

news/2024/11/17 5:26:08/

在这里插入图片描述

一、什么是MobX

MobX 是一个状态管理库，它可以让你轻松地管理应用程序的状态，并且可以扩展和维护。它使用观察者模式来自动传播你的状态的变化到你的 React 组件。

二、安装及配置

安装 MobX 和 MobX-React：你可以使用 npm 或 yarn 安装这些库：

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

定义一个 Store：Store 是一个保存应用程序状态的对象。你可以使用 MobX 的 observable 装饰器来使 Store 的属性可观察。这里是一个例子：

import { observable, action } from 'mobx';
import axios from 'axios';class Store {@observable data = null;@observable loading = false;@actionasync 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组件中使用

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 在函数式组件中使用

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;