React集成MobX

将 MobX 与 React 集成，按照以下步骤进行操作：

1. 安装依赖

首先，使用包管理工具（如 npm 或 yarn）安装所需的依赖：

npm install mobx mobx-react

或者

yarn add mobx mobx-react

2. 创建 MobX 存储（Store）

创建一个 JavaScript 类来表示您的存储。在存储中定义可观察的数据和操作数据的方法。

javascript格式：

import { observable, action } from'mobx';

class MyStore {

  @observable counter = 0;

  @action increment() {

    this.counter++;

  }

 

  @action decrement() {

    this.counter--;

  }

}

 

export default new MyStore();

 

3. 在 React 组件中使用 MobX

使用  observer  高阶组件将您的 React 组件包裹起来，使其能够响应 MobX 存储中的数据变化。

javascript格式：

import React from'react';

import { observer } from'mobx-react';

import store from './store';

 

@observer

class MyComponent extends React.Component {

  render() {

    return (

      <div>

        <p>Counter: {store.counter}</p>

        <button onClick={store.increment}>Increment</button>

        <button onClick={store.decrement}>Decrement</button>

      </div>

    );

  }

}

 

export default MyComponent;

通过以上步骤，您就成功地将 MobX 与 React 集成在一起，组件将根据存储中的数据变化自动重新渲染。