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

一、什么是MobX

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

二、安装及配置

  1. 安装 MobX 和 MobX-React:你可以使用 npm 或 yarn 安装这些库:
bash 复制代码
npm install mobx mobx-react-lite
# 或者
yarn add mobx mobx-react-lite
  1. 定义一个 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 钩子被用来使组件在 loadingdata 改变时重新渲染。当按钮被点击时,fetchData action 被调用。

更多细节参考中文文档:https://cn.mobx.js.org/

相关推荐
熊的猫43 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
小牛itbull5 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet16 小时前
那总结下来,react就是落后了
前端·react.js
王解20 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语2 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情2 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0012 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解2 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull2 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架