react-mobx的使用

React-Mobx是React应用程序和Mobx状态管理库的结合。它帮助开发人员在应用程序中轻松管理和更新状态，同时提高应用程序的性能。

下面是使用React-Mobx的基本步骤：

1. 安装React-Mobx：使用npm安装React-Mobx库。

npm install mobx mobx-react --save

2. 创建一个store：一个store是包含应用程序状态的对象。它可以包含数据和方法，用于更新和管理状态。

import { observable, action } from 'mobx';

class CounterStore {
  @observable count = 0;

  @action increment() {
    this.count++;
  }

  @action decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();
export default counterStore;

3. 在React组件中使用store：使用`Provider`组件将store传递给React组件，然后使用`inject`和`observer`高阶组件包装组件。

import React from 'react';
import { Provider, inject, observer } from 'mobx-react';
import counterStore from './counterStore';

@inject('counterStore')
@observer
class Counter extends React.Component {
  render() {
    const { counterStore } = this.props;
    return (
      <div>
        <h1>Count: {counterStore.count}</h1>
        <button onClick={counterStore.increment}>+</button>
        <button onClick={counterStore.decrement}>-</button>
      </div>
    );
  }
}

const App = () => (
  <Provider counterStore={counterStore}>
    <Counter />
  </Provider>
);

export default App;

在这个例子中，`inject`高阶组件将store作为props传递给`Counter`组件，`observer`高阶组件将组件转换为响应式组件，使组件能够响应store中状态的更改。

4. 更新状态：使用store中的方法更新状态。

import counterStore from './counterStore';

counterStore.increment();
counterStore.decrement();

这些是使用React-Mobx的基本步骤。使用React-Mobx可以更轻松地管理和更新状态，同时提高应用程序的性能。