状态管理器Mobx的简单使用

一、什么是Mobx？

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

二、安装和配置

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

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

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

import { observable, action } from 'mobx';

class Store {
  @observable data= 0;
  @observable loading = false;

  @action
  fetchData() {
    this.loading = true;

    setTimeout(() => {
    this.data++
    this.loading = false;
    }, 3000)
  }
}

const store = new Store();
export default store;

三、在组件中使用

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

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 被调用。